@kingsoft-ai/design 0.1.19 → 0.2.6

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

@@ -0,0 +1,137 @@
+/**
+ * Progress Styled Tokens
+ *
+ * 将 Progress 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Progress 组件的 Styled Tokens
+ */
+export declare const $progress: {
+    readonly colorNormal: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly colorError: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly colorWarning: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly colorSuccess: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly trackBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly trackBorderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lineSmHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lineMdHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lineLgHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleSmSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleMdSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleMdFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleMdFontWeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleMdLineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleLgSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleLgFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleLgFontWeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleLgLineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textLineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly iconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly gap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly infoGap: (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/progress/tokens.d.ts

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

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

@@ -0,0 +1,52 @@
+/**
+ * Progress 组件 Token 类型定义
+ */
+export interface ProgressTokens {
+    color: {
+        normal: string;
+        error: string;
+        warning: string;
+        success: string;
+    };
+    track: {
+        bg: string;
+        borderRadius: string;
+    };
+    line: {
+        sm: {
+            height: string;
+        };
+        md: {
+            height: string;
+        };
+        lg: {
+            height: string;
+        };
+    };
+    circle: {
+        sm: {
+            size: string;
+        };
+        md: {
+            size: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        lg: {
+            size: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+    };
+    text: {
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+    };
+    iconSize: string;
+    gap: string;
+    infoGap: string;
+    transition: string;
+}

package/dist/types/radio/Radio.d.ts

@@ -2,8 +2,12 @@ import type { InputHTMLAttributes, ReactNode } from 'react';
 export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
     label?: ReactNode;
     description?: ReactNode;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
 };
 export declare const Radio: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
     label?: ReactNode;
     description?: ReactNode;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/radio/Radio.style.d.ts

@@ -1,19 +1,13 @@
 /**
- * Radio 组件样式
+ * Radio 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-radio-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
+ * 使用 Styled Token System 实现样式：
+ * - JS Token 优先（来自 ThemeProvider，支持用户自定义）
+ * - CSS 变量作为 fallback（无 Provider 时的兜底）
  */
 interface RadioWrapperProps {
     disabled?: boolean;
 }
-/**
- * Radio 容器
- */
 export declare const RadioWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -21,30 +15,23 @@ export declare const RadioWrapper: import("@emotion/styled").StyledComponent<{
 interface RadioRootProps {
     disabled?: boolean;
 }
-/**
- * Radio 控件根节点
- */
 export declare const RadioRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & RadioRootProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * 隐藏的原生 radio input
- */
 export declare const RadioNative: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-/**
- * Radio 指示器（圆点）
- */
 export declare const RadioIndicator: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    isFocusVisible?: boolean;
+    isHovered?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * Radio 文本区域
- */
 export declare const RadioText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -52,9 +39,6 @@ export declare const RadioText: import("@emotion/styled").StyledComponent<{
 interface RadioLabelProps {
     disabled?: boolean;
 }
-/**
- * Radio 标签
- */
 export declare const RadioLabel: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -62,9 +46,6 @@ export declare const RadioLabel: import("@emotion/styled").StyledComponent<{
 interface RadioDescriptionProps {
     disabled?: boolean;
 }
-/**
- * Radio 描述文本
- */
 export declare const RadioDescription: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

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

@@ -0,0 +1,122 @@
+/**
+ * Radio Styled Tokens
+ *
+ * 将 Radio 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Radio 组件的 Styled Tokens
+ */
+export declare const $radio: {
+    readonly controlSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlBorderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlBorderWidth: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlBorder: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlBorderHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlBorderChecked: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlBorderDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly indicatorSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly indicatorColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly indicatorColorDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly focusRing: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly gap: (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 labelColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly labelColorDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly descriptionFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly descriptionColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly descriptionColorDisabled: (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;
+};

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

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

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

@@ -0,0 +1,41 @@
+/**
+ * Radio 组件 Token 类型定义
+ */
+export interface RadioTokens {
+    control: {
+        size: string;
+        borderRadius: string;
+        borderWidth: string;
+        background: string;
+        borderColor: {
+            default: string;
+            hover: string;
+            checked: string;
+            disabled: string;
+        };
+        indicator: {
+            size: string;
+            color: string;
+            disabled: string;
+        };
+    };
+    focusRing: string;
+    gap: string;
+    transition: string;
+    text: {
+        label: {
+            fontSize: string;
+            color: string;
+            disabled: string;
+            fontWeight: number;
+        };
+        description: {
+            color: string;
+            disabled: string;
+            fontSize: string;
+        };
+    };
+    disabled: {
+        opacity: number;
+    };
+}

package/dist/types/select/Select.style.d.ts

@@ -1,12 +1,9 @@
 /**
- * Select 样式组件
+ * Select 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-select-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
+ * 使用 Styled Token System 实现样式：
+ * - JS Token 优先（来自 ThemeProvider，支持用户自定义）
+ * - CSS 变量作为 fallback（无 Provider 时的兜底）
  */
 export declare const selectSizes: readonly ["sm", "md", "lg"];
 export type SelectSize = (typeof selectSizes)[number];