@kingsoft-ai/design 0.1.18 → 0.2.6

package/dist/types/slider/__tests__/Slider.test.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Slider 组件测试
+ *
+ * 测试覆盖：
+ * - 基础渲染
+ * - 尺寸 (sm, md, lg)
+ * - 受控/非受控模式
+ * - 禁用状态
+ * - 刻度标记
+ * - 数值格式化
+ * - 无障碍性
+ */
+export {};

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

@@ -0,0 +1,2 @@
+export { Slider, SIZES as SLIDER_SIZES } from './Slider';
+export type { SliderProps, SliderMark } from './Slider';

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

@@ -0,0 +1,252 @@
+/**
+ * Slider Styled Tokens
+ *
+ * 将 Slider 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Slider 组件的 Styled Tokens
+ */
+export declare const $slider: {
+    readonly trackBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly trackBgDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly trackBorder: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly trackHeightSm: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly trackHeightMd: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly trackHeightLg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fillBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fillBgHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fillBgDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbBgHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbBgActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbBgDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbBorder: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbBorderHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbBorderActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbBorderDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbShadow: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbShadowHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbShadowActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbSizeSm: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbSizeMd: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbSizeLg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly labelColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly labelColorDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly labelFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly labelFontWeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly valueColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly valueColorDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly valueFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly markDotSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly markDotBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly markDotBgActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly markLabelColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly markLabelColorActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly markLabelFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly tooltipBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly tooltipText: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly tooltipFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly tooltipBorderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly tooltipPadding: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly tooltipShadow: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly focusRingColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly focusRingWidth: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly focusRingOffset: (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/slider/tokens.d.ts

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

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

@@ -0,0 +1,121 @@
+/**
+ * Slider 组件 Token 类型定义
+ */
+export interface SliderTokens {
+    /** 轨道样式 */
+    track: {
+        /** 背景色 */
+        background: {
+            default: string;
+            disabled: string;
+        };
+        /** 边框 */
+        border: {
+            default: string;
+        };
+        /** 尺寸 */
+        height: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+    };
+    /** 已填充区域样式 */
+    fill: {
+        /** 背景色 */
+        background: {
+            default: string;
+            hover: string;
+            disabled: string;
+        };
+    };
+    /** 滑块（拖动按钮）样式 */
+    thumb: {
+        /** 背景色 */
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+            disabled: string;
+        };
+        /** 边框 */
+        border: {
+            default: string;
+            hover: string;
+            active: string;
+            disabled: string;
+        };
+        /** 阴影 */
+        shadow: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        /** 尺寸 */
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+    };
+    /** 标签样式 */
+    label: {
+        /** 文字颜色 */
+        color: {
+            default: string;
+            disabled: string;
+        };
+        /** 字体大小 */
+        fontSize: string;
+        /** 字体粗细 */
+        fontWeight: number;
+    };
+    /** 数值显示样式 */
+    value: {
+        /** 文字颜色 */
+        color: {
+            default: string;
+            disabled: string;
+        };
+        /** 字体大小 */
+        fontSize: string;
+    };
+    /** 刻度标记样式 */
+    mark: {
+        /** 点标记 */
+        dot: {
+            size: string;
+            background: {
+                default: string;
+                active: string;
+            };
+        };
+        /** 标记文字 */
+        label: {
+            color: {
+                default: string;
+                active: string;
+            };
+            fontSize: string;
+        };
+    };
+    /** Tooltip 样式 */
+    tooltip: {
+        background: string;
+        text: string;
+        fontSize: string;
+        borderRadius: string;
+        padding: string;
+        shadow: string;
+    };
+    /** 焦点环 */
+    focusRing: {
+        color: string;
+        width: string;
+        offset: string;
+    };
+    /** 通用属性 */
+    borderRadius: string;
+    transition: string;
+    disabledOpacity: number;
+}

package/dist/types/stepper/Stepper.d.ts

@@ -13,7 +13,10 @@ export interface StepperProps {
     variant?: StepperVariant;
     /** Children (Step components) */
     children: ReactNode;
+    /** Custom class name */
     className?: string;
+    /** Custom style (supports CSS variable customization) */
+    style?: React.CSSProperties;
     /** Callback when step is clicked */
     onChange?: (index: number) => void;
 }

package/dist/types/stepper/Stepper.style.d.ts

@@ -1,12 +1,9 @@
 /**
- * Stepper 步骤条样式
+ * Stepper 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-stepper-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
+ * 使用 Styled Token System 实现样式：
+ * - JS Token 优先（来自 ThemeProvider，支持用户自定义）
+ * - CSS 变量作为 fallback（无 Provider 时的兜底）
  */
 export type StepperOrientation = 'horizontal' | 'vertical';
 export type StepperLabelPlacement = 'right' | 'bottom';

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

@@ -0,0 +1,157 @@
+/**
+ * Stepper Styled Tokens
+ *
+ * 将 Stepper 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Stepper 组件的 Styled Tokens
+ */
+export declare const $stepper: {
+    readonly gap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleMdSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleSmSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleMdFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleSmFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleMdIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleSmIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly dotMdSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly dotSmSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly dotPulseColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lineColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lineColorActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lineSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly titleColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly titleColorActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly titleColorError: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly titleColorWaiting: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly titleFontWeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly titleFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly descriptionColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly descriptionFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly processColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly processBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly waitColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly waitBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly finishColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly finishBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly errorColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly errorBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+};

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

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

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

@@ -0,0 +1,68 @@
+/**
+ * Stepper 组件 Token 类型定义
+ */
+export interface StepperTokens {
+    circle: {
+        size: {
+            md: string;
+            sm: string;
+        };
+        fontSize: {
+            md: string;
+            sm: string;
+        };
+        iconSize: {
+            md: string;
+            sm: string;
+        };
+    };
+    dot: {
+        size: {
+            md: string;
+            sm: string;
+        };
+        pulseColor: string;
+    };
+    line: {
+        color: {
+            default: string;
+            active: string;
+        };
+        size: string;
+    };
+    text: {
+        title: {
+            color: {
+                default: string;
+                active: string;
+                error: string;
+                waiting: string;
+            };
+            fontWeight: number;
+            fontSize: string;
+        };
+        description: {
+            color: string;
+            fontSize: string;
+        };
+    };
+    state: {
+        process: {
+            color: string;
+            bg: string;
+        };
+        wait: {
+            color: string;
+            bg: string;
+        };
+        finish: {
+            color: string;
+            bg: string;
+        };
+        error: {
+            color: string;
+            bg: string;
+        };
+    };
+    gap: string;
+}