@kingsoft-ai/design 0.1.19 → 0.2.6

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

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

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

@@ -0,0 +1,107 @@
+/**
+ * Modal 组件 Token 类型定义
+ */
+export interface ModalTokens {
+    size: {
+        sm: {
+            width: string;
+            maxWidth: string;
+            padding: string;
+            headerPadding: string;
+            footerPadding: string;
+            titleFontSize: string;
+        };
+        md: {
+            width: string;
+            maxWidth: string;
+            padding: string;
+            headerPadding: string;
+            footerPadding: string;
+            titleFontSize: string;
+        };
+        lg: {
+            width: string;
+            maxWidth: string;
+            padding: string;
+            headerPadding: string;
+            footerPadding: string;
+            titleFontSize: string;
+        };
+        xl: {
+            width: string;
+            maxWidth: string;
+            padding: string;
+            headerPadding: string;
+            footerPadding: string;
+            titleFontSize: string;
+        };
+        fullscreen: {
+            width: string;
+            maxWidth: string;
+            padding: string;
+            headerPadding: string;
+            footerPadding: string;
+            titleFontSize: string;
+        };
+    };
+    overlay: {
+        background: string;
+        backdropFilter: string;
+    };
+    container: {
+        background: string;
+        borderRadius: string;
+        boxShadow: string;
+        border: string;
+        maxHeight: string;
+    };
+    header: {
+        background: string;
+        borderBottom: string;
+        minHeight: string;
+        gap: string;
+    };
+    title: {
+        color: string;
+        fontWeight: number;
+        lineHeight: string;
+    };
+    description: {
+        color: string;
+        fontSize: string;
+        lineHeight: string;
+        marginTop: string;
+    };
+    closeButton: {
+        size: string;
+        iconSize: string;
+        color: string;
+        hoverColor: string;
+        hoverBackground: string;
+        borderRadius: string;
+    };
+    content: {
+        color: string;
+        fontSize: string;
+        lineHeight: string;
+        maxHeight: string;
+    };
+    footer: {
+        background: string;
+        borderTop: string;
+        minHeight: string;
+        gap: string;
+        justifyContent: string;
+    };
+    animation: {
+        duration: string;
+        easing: string;
+        scaleFrom: string;
+        scaleTo: string;
+    };
+    zIndex: {
+        overlay: number;
+        container: number;
+    };
+    transition: string;
+}

package/dist/types/numberInput/NumberInput.d.ts

@@ -1,24 +1,3 @@
-/**
- *  数字输入框组件
- *
- * 基于 react-aria 实现无障碍访问的数字输入框组件
- * 完全符合 Figma 设计稿规范
- *
- * @example
- * ```tsx
- * <NumberInput
- *   size="md"
- *   defaultValue={10}
- *   min={0}
- *   max={100}
- *   step={1}
- *   label="数量"
- *   description="请输入数量"
- *   controls="buttons"
- *   onValueChange={(v) => console.log(v)}
- * />
- * ```
- */
 import { type ReactNode, type ChangeEvent } from 'react';
 export type NumberInputProps = {
     /** 初始数值（受控请使用 value） */
@@ -57,11 +36,12 @@ export type NumberInputProps = {
     disabled?: boolean;
     /** 自定义类名 */
     className?: string;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
     /** 自定义 ID */
     id?: string;
     /** 原生 input onChange 事件（用于表单库等场景） */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-/** 数字输入框组件 */
 export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default NumberInput;

package/dist/types/numberInput/NumberInput.style.d.ts

@@ -1,12 +1,9 @@
 /**
- * NumberInput 数字输入框样式
+ * NumberInput 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-number-input-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
+ * 使用 Styled Token System 实现样式：
+ * - JS Token 优先（来自 ThemeProvider，支持用户自定义）
+ * - CSS 变量作为 fallback（无 Provider 时的兜底）
  */
 export declare const NumberRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

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

@@ -0,0 +1,192 @@
+/**
+ * NumberInput Styled Tokens
+ *
+ * 将 NumberInput 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * NumberInput 组件的 Styled Tokens
+ */
+export declare const $numberInput: {
+    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 mdPaddingInline: (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 lgPaddingInline: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly inputWidth: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly inputHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly inputPaddingInline: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly inputFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly inputFontWeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly inputLineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlSideButtonSm: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlSideButtonLg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlSideInset: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlSideGap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlSideIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlSideWidthSm: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlSideWidthLg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlArrowsButtonSm: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlArrowsButtonLg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlArrowsIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlArrowsGap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlArrowsWidthSm: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlArrowsWidthLg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly border: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly bg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly bgHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly bgDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly text: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textPlaceholder: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textDisabled: (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;
+};

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

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

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

@@ -0,0 +1,65 @@
+/**
+ * NumberField 组件 Token 类型定义
+ */
+export interface NumberFieldTokens {
+    controls: {
+        default: 'buttons' | 'arrows';
+    };
+    size: {
+        md: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+        };
+        lg: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+        };
+    };
+    input: {
+        width: string;
+        height: string;
+        paddingInline: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        fontFamily: string;
+    };
+    control: {
+        side: {
+            buttonSizeSm: string;
+            buttonSizeLg: string;
+            inset: string;
+            gap: string;
+            iconSize: string;
+            widthsm: string;
+            widthLg: string;
+        };
+        arrows: {
+            buttonSizeSm: string;
+            buttonSizeLg: string;
+            iconSize: string;
+            gap: string;
+            widthsm: string;
+            widthLg: string;
+        };
+    };
+    borderRadius: string;
+    border: {
+        default: string;
+        hover: string;
+        disabled: string;
+    };
+    background: {
+        default: string;
+        hover: string;
+        disabled: string;
+    };
+    text: {
+        default: string;
+        placeholder: string;
+        disabled: string;
+    };
+    transition: string;
+}

package/dist/types/progress/Progress.d.ts

@@ -1,24 +1,3 @@
-/**
- * Progress 进度条组件
- *
- * 基于 react-aria 实现无障碍访问的进度条组件
- * 完全符合 Figma 设计稿规范
- *
- * @example
- * ```tsx
- * // 线型进度条
- * <Progress value={60} />
- *
- * // 环形进度条
- * <Progress type="circle" value={80} />
- *
- * // 带状态的进度条
- * <Progress value={100} status="success" />
- *
- * // 不显示百分比
- * <Progress value={60} showPercent={false} />
- * ```
- */
 import type { AriaProgressBarProps } from 'react-aria';
 import { type ProgressType, type ProgressSize, type ProgressStatus } from './Progress.style';
 export declare const TYPES: readonly ["line", "circle"];
@@ -39,13 +18,9 @@ export type ProgressProps = Omit<AriaProgressBarProps, 'value'> & {
     showIcon?: boolean;
     /** 自定义类名 */
     className?: string;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
 };
-/**
- * Progress 进度条组件
- *
- * 基于 Figma 设计规范实现的进度条组件，支持线型和环形两种类型
- * 使用 react-aria 保证无障碍访问性
- */
 export declare const Progress: import("react").ForwardRefExoticComponent<Omit<AriaProgressBarProps, "value"> & {
     /** 进度条类型：线型、环形 */
     type?: ProgressType;
@@ -61,4 +36,6 @@ export declare const Progress: import("react").ForwardRefExoticComponent<Omit<Ar
     showIcon?: boolean;
     /** 自定义类名 */
     className?: string;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/progress/Progress.style.d.ts

@@ -1,12 +1,9 @@
 /**
- * Progress 进度条样式
+ * Progress 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-progress-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
+ * 使用 Styled Token System 实现样式：
+ * - JS Token 优先（来自 ThemeProvider，支持用户自定义）
+ * - CSS 变量作为 fallback（无 Provider 时的兜底）
  */
 export declare const progressTypes: readonly ["line", "circle"];
 export declare const progressSizes: readonly ["sm", "md", "lg"];
@@ -14,27 +11,18 @@ export declare const progressStatuses: readonly ["normal", "error", "warning", "
 export type ProgressType = (typeof progressTypes)[number];
 export type ProgressSize = (typeof progressSizes)[number];
 export type ProgressStatus = (typeof progressStatuses)[number];
-/**
- * 线型进度条容器
- */
 export declare const LineProgressRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     size: ProgressSize;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 线型进度条轨道
- */
 export declare const LineProgressTrack: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     size: ProgressSize;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 线型进度条填充
- */
 export declare const LineProgressBar: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -42,73 +30,46 @@ export declare const LineProgressBar: import("@emotion/styled").StyledComponent<
     status: ProgressStatus;
     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 StatusIcon: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     status: ProgressStatus;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * 线型进度条信息区域（百分比+图标）
- */
 export declare const LineProgressInfo: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 环形进度条容器
- */
 export declare const CircleProgressRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     size: ProgressSize;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 环形进度条 SVG
- */
 export declare const CircleProgressSvg: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").SVGProps<SVGSVGElement>, {}>;
-/**
- * 环形进度条轨道圆
- */
 export declare const CircleProgressTrack: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").SVGProps<SVGCircleElement>, {}>;
-/**
- * 环形进度条填充圆
- */
 export declare const CircleProgressBar: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     status: ProgressStatus;
 }, import("react").SVGProps<SVGCircleElement>, {}>;
-/**
- * 环形进度条内容（百分比文字或图标）
- */
 export declare const CircleProgressContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     size: ProgressSize;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 小号环形进度条的图标
- */
 export declare const CircleProgressIcon: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;