@kingsoft-ai/design 0.1.18 → 0.2.6

package/dist/types/switch/Switch.d.ts

@@ -1,32 +1,3 @@
-/**
- * Switch 开关组件
- *
- * 基于 react-aria 实现无障碍访问的开关组件
- * 完全符合 Figma 设计稿规范
- * 支持带文字的开关（如 ON/OFF、开/关）
- *
- * @example
- * ```tsx
- * // 基础用法
- * <Switch>开启通知</Switch>
- *
- * // 带状态文字
- * <Switch
- *   checkedLabel="开"
- *   uncheckedLabel="关"
- * >
- *   夜间模式
- * </Switch>
- *
- * // 受控组件
- * <Switch
- *   isSelected={enabled}
- *   onChange={setEnabled}
- * >
- *   自动保存
- * </Switch>
- * ```
- */
 import type { ReactNode } from 'react';
 import type { AriaSwitchProps } from 'react-aria';
 import type { ToggleProps } from '@react-types/checkbox';
@@ -49,13 +20,9 @@ export type SwitchProps = Omit<AriaSwitchProps, 'children' | 'isDisabled'> & Omi
     children?: ReactNode;
     /** 自定义类名 */
     className?: string;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
 };
-/**
- * Switch 开关组件
- *
- * 基于 Figma 设计规范实现的开关组件，支持带文字的开关
- * 使用 react-aria 保证无障碍访问性
- */
 export declare const Switch: import("react").ForwardRefExoticComponent<Omit<AriaSwitchProps, "children" | "isDisabled"> & Omit<ToggleProps, "children" | "isDisabled"> & {
     /** 开关尺寸：小号(20px)、标准(24px) */
     size?: SwitchSize;
@@ -73,4 +40,6 @@ export declare const Switch: import("react").ForwardRefExoticComponent<Omit<Aria
     children?: ReactNode;
     /** 自定义类名 */
     className?: string;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/switch/Switch.style.d.ts

@@ -1,25 +1,12 @@
 /**
- * Switch 开关样式
+ * Switch 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-switch-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
- * 支持带文字的开关组件（如 ON/OFF、开/关）
+ * 使用 Styled Token System 实现样式：
+ * - JS Token 优先（来自 ThemeProvider，支持用户自定义）
+ * - CSS 变量作为 fallback（无 Provider 时的兜底）
  */
 export declare const switchSizes: readonly ["sm", "md"];
 export type SwitchSize = (typeof switchSizes)[number];
-/**
- * Switch 根元素（label 标签）
- *
- * 特性：
- * - 基于 CSS 变量，无需 ThemeProvider
- * - 完整的交互状态（hover, focus, disabled）
- * - 支持带文字的开关
- * - 平滑的动画过渡
- */
 export declare const SwitchRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -30,16 +17,6 @@ export declare const SwitchRoot: import("@emotion/styled").StyledComponent<{
     isFocusVisible: boolean;
     hasInnerLabel: boolean;
 }, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
-/**
- * Switch 内容容器
- *
- * 用于布局文字和滑块，确保正确的间距和对齐
- * 根据 Figma 设计，元素间距为 4px
- *
- * 布局策略：
- * - 文字使用相对定位，根据状态调整 justify-content
- * - 滑块使用绝对定位 + left/right 切换实现平滑动画
- */
 export declare const SwitchContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -47,51 +24,22 @@ export declare const SwitchContent: import("@emotion/styled").StyledComponent<{
     isSelected: boolean;
     hasInnerLabel: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * Switch 文字标签
- *
- * 显示开关状态文字（如 ON/OFF、开/关）
- * 使用 CSS 变量实现
- *
- * 使用相对定位，不影响滑块的绝对定位计算
- */
 export declare const SwitchLabel: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     isSelected: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * Switch 滑块（Thumb）
- *
- * 白色圆形滑块，根据开关状态滑动
- * 使用 CSS 变量实现
- *
- * 使用绝对定位 + transform 实现平滑的位置动画
- * 根据 Figma 设计：
- * - 未选中时：left: 0（紧贴左边缘，实际距离容器边缘 3px）
- * - 选中时：right: 0（紧贴右边缘，实际距离容器边缘 3px）
- */
 export declare const SwitchThumb: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     isSelected: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * 外部标签容器
- *
- * 用于在 Switch 外部显示描述性标签
- */
 export declare const SwitchLabelWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 外部标签文字
- *
- * Switch 旁边的描述性文字
- */
 export declare const SwitchLabelText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

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

@@ -0,0 +1,132 @@
+/**
+ * Switch Styled Tokens
+ *
+ * 将 Switch 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Switch 组件的 Styled Tokens
+ */
+export declare const $switch: {
+    readonly smWidth: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smThumbSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smPaddingInline: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdWidth: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdThumbSize: (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 bgUnchecked: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly bgChecked: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly bgDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly thumbShadow: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textFontWeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly gap: (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;
+    readonly focusRingColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly focusRingOffset: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+};

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

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

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

@@ -0,0 +1,45 @@
+/**
+ * Switch 组件 Token 类型定义
+ */
+export interface SwitchTokens {
+    size: {
+        sm: {
+            width: string;
+            height: string;
+            thumbSize: string;
+            fontSize: string;
+            paddingInline: string;
+        };
+        md: {
+            width: string;
+            height: string;
+            thumbSize: string;
+            fontSize: string;
+            paddingInline: string;
+        };
+    };
+    background: {
+        unchecked: string;
+        checked: string;
+        disabled: string;
+    };
+    thumb: {
+        background: string;
+        shadow: string;
+    };
+    text: {
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+    };
+    borderRadius: string;
+    gap: string;
+    transition: string;
+    disabled: {
+        opacity: number;
+    };
+    focusRing: {
+        color: string;
+        offset: string;
+    };
+}

package/dist/types/table/Table.d.ts

@@ -78,6 +78,8 @@ export interface TableProps<T extends Record<string, any> = Record<string, any>>
     emptyText?: ReactNode;
     /** 自定义类名 */
     className?: string;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
     /** 是否允许折行 */
     wrapText?: boolean;
     /** Loading 状态 */

package/dist/types/table/Table.style.d.ts

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

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

@@ -0,0 +1,182 @@
+/**
+ * Table Styled Tokens
+ *
+ * 将 Table 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Table 组件的 Styled Tokens
+ */
+export declare const $table: {
+    readonly borderRadiusSm: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderRadiusMd: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderRadiusLg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly bg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly headerBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly rowBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly rowHoverBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly rowActiveBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly rowSelectedBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly rowSubrowBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly headerColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly cellColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly cellPaddingSm: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly cellPaddingMd: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly cellPaddingLg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly cellFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly cellLineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly dividerColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly scrollbarWidth: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly scrollbarThumbColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly scrollbarTrackColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly sortIconColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly sortIconActiveColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly expandBtnSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly expandIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly expandIconColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly expandIconHoverColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly emptyPadding: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly emptyColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly emptyFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fixedShadowLeft: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fixedShadowRight: (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/table/tokens.d.ts

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

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

@@ -0,0 +1,43 @@
+/**
+ * Table 组件 Token 类型定义
+ */
+export interface TableTokens {
+    borderRadius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    borderColor: string;
+    bg: string;
+    headerBg: string;
+    rowBg: string;
+    rowHoverBg: string;
+    rowActiveBg: string;
+    rowSelectedBg: string;
+    rowSubrowBg: string;
+    headerColor: string;
+    cellColor: string;
+    cellPadding: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    cellFontSize: string;
+    cellLineHeight: string | number;
+    dividerColor: string;
+    scrollbarWidth: string;
+    scrollbarThumbColor: string;
+    scrollbarTrackColor: string;
+    sortIconColor: string;
+    sortIconActiveColor: string;
+    expandBtnSize: string;
+    expandIconSize: string;
+    expandIconColor: string;
+    expandIconHoverColor: string;
+    emptyPadding: string;
+    emptyColor: string;
+    emptyFontSize: string;
+    fixedShadowLeft: string;
+    fixedShadowRight: string;
+    transition: string;
+}

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

@@ -1,28 +1,3 @@
-/**
- * Tag 标签组件
- *
- * 基于 react-aria 实现无障碍访问的标签组件
- * 完全符合 Figma 设计稿规范
- *
- * @example
- * ```tsx
- * // 基础用法
- * <Tag>标签</Tag>
- *
- * // 可关闭
- * <Tag closable onClose={() => console.log('closed')}>标签</Tag>
- *
- * // 带图标
- * <Tag icon={<IconOutline />}>标签</Tag>
- *
- * // 可选择
- * <Tag checkable checked onChange={(checked) => console.log(checked)}>标签</Tag>
- *
- * // 彩色标签
- * <Tag color="red">红色</Tag>
- * <Tag color="blue" bordered>蓝色带边框</Tag>
- * ```
- */
 import { type ReactNode } from 'react';
 import type { AriaButtonProps } from 'react-aria';
 import { type TagVariant, type TagSize, type TagColor } from './Tag.style';
@@ -48,6 +23,8 @@ export interface TagProps {
     disabled?: boolean;
     /** 自定义类名 */
     className?: string;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
     /** 子元素 */
     children?: ReactNode;
     /** 关闭回调 */
@@ -57,24 +34,15 @@ export interface TagProps {
     /** 点击回调 */
     onClick?: () => void;
 }
-/**
- * Tag 标签组件
- *
- * 基于 Figma 设计规范实现的标签组件，支持多种变体、颜色和尺寸
- * 使用 react-aria 保证无障碍访问性
- */
 export declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLSpanElement>>;
 export interface TagAddProps extends Omit<AriaButtonProps, 'elementType'> {
     /** 标签尺寸 */
     size?: TagSize;
     /** 自定义类名 */
     className?: string;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
     /** 子元素 */
     children?: ReactNode;
 }
-/**
- * Tag.Add 添加标签按钮
- *
- * 用于添加新标签的按钮组件
- */
 export declare const TagAdd: import("react").ForwardRefExoticComponent<TagAddProps & import("react").RefAttributes<HTMLButtonElement>>;