@kingsoft-ai/design 0.1.18 → 0.2.6

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

@@ -0,0 +1,190 @@
+/**
+ * Button 组件 Token 类型定义
+ */
+type IconButtonStateTokens = {
+    background: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    border: {
+        default: string;
+        hover?: string;
+        active?: string;
+    };
+    icon: {
+        default: string;
+        hover?: string;
+        active?: string;
+    };
+    shadow?: {
+        default: string;
+        hover?: string;
+    };
+};
+export interface ButtonTokens {
+    primary: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+        };
+        shadow: {
+            default: string;
+            hover: string;
+        };
+    };
+    secondary: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        shadow: {
+            default: string;
+        };
+    };
+    text: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+    };
+    danger: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+        };
+        shadow: {
+            default: string;
+            hover: string;
+        };
+    };
+    gradient: {
+        background: {
+            default: string;
+            gradientFrom: string;
+            gradientTo: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+        };
+        shadow: {
+            default: string;
+            hover: string;
+        };
+    };
+    disabled: {
+        background: {
+            default: string;
+        };
+        text: {
+            default: string;
+        };
+        opacity: number;
+    };
+    size: {
+        sm: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+        md: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+        lg: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+    };
+    borderRadius: string;
+    fontWeight: number;
+    gap: string;
+    transition: string;
+}
+export interface IconButtonTokens {
+    appearance: {
+        solid: {
+            primary: IconButtonStateTokens;
+            neutral: IconButtonStateTokens;
+            danger: IconButtonStateTokens;
+        };
+        outline: {
+            primary: IconButtonStateTokens;
+            neutral: IconButtonStateTokens;
+            danger: IconButtonStateTokens;
+        };
+        ghost: {
+            primary: IconButtonStateTokens;
+            neutral: IconButtonStateTokens;
+            danger: IconButtonStateTokens;
+        };
+    };
+    disabled: {
+        background: string;
+        border: string;
+        icon: string;
+        opacity: number;
+    };
+    size: {
+        sm: {
+            edge: string;
+            iconSize: string;
+        };
+        md: {
+            edge: string;
+            iconSize: string;
+        };
+        lg: {
+            edge: string;
+            iconSize: string;
+        };
+    };
+    borderRadius: string;
+    transition: string;
+    focusRing: {
+        color: string;
+        offset: string;
+        width: string;
+    };
+}
+export {};

package/dist/types/card/Card.d.ts

@@ -1,9 +1,3 @@
-/**
- * Card 卡片组件
- *
- * 基于 CSS 变量实现，无需 ThemeProvider
- * 支持通过覆盖 CSS 变量自定义样式
- */
 import React, { ReactNode } from 'react';
 import { type CardVariant } from './Card.style';
 export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {

package/dist/types/card/Card.style.d.ts

@@ -1,12 +1,9 @@
 /**
- * Card 卡片样式
+ * Card 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-card-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
+ * 使用 Styled Token System 实现样式：
+ * - JS Token 优先（来自 ThemeProvider，支持用户自定义）
+ * - CSS 变量作为 fallback（无 Provider 时的兜底）
  */
 export type CardVariant = 'elevated' | 'outlined' | 'filled';
 export declare const CardContainer: import("@emotion/styled").StyledComponent<{

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

@@ -0,0 +1,130 @@
+/**
+ * Card Styled Tokens
+ *
+ * 将 Card 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Card 组件的 Styled Tokens
+ *
+ * 命名规范：$ 前缀表示这是可在 styled-components 中直接使用的 token 对象
+ *
+ * @example
+ * ```tsx
+ * import { $card } from './styled-tokens';
+ *
+ * const CardContainer = styled.div`
+ *   background: ${$card.bg};
+ *   border-radius: ${$card.radius};
+ *   transition: ${$card.transition};
+ * `;
+ * ```
+ */
+export declare const $card: {
+    readonly bg: (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 shadowElevated: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly shadowElevatedHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly radius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly transition: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly paddingSm: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly paddingMd: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly paddingLg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly headerPadding: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly headerBorderBottom: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly titleColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly titleFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly titleFontWeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly extraColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly extraFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly coverRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly footerPadding: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly footerBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly footerBorderTop: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+};

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

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

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

@@ -0,0 +1,48 @@
+/**
+ * Card 组件 Token 类型定义
+ */
+export interface CardTokens {
+    container: {
+        background: {
+            default: string;
+        };
+        border: {
+            default: string;
+            hover: string;
+        };
+        shadow: {
+            elevated: string;
+            elevatedHover: string;
+            outlined: string;
+            filled: string;
+        };
+        radius: string;
+        transition: string;
+    };
+    padding: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    header: {
+        padding: string;
+        borderBottom: string;
+        title: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+        extra: {
+            color: string;
+            fontSize: string;
+        };
+    };
+    cover: {
+        radius: string;
+    };
+    footer: {
+        padding: string;
+        background: string;
+        borderTop: string;
+    };
+}

package/dist/types/checkbox/Checkbox.d.ts

@@ -1,10 +1,3 @@
-/**
- * Checkbox 组件
- * 基于 Figma 设计稿 1:1 还原
- *
- * 使用 CSS 变量的三层 Token 体系，无需 ThemeProvider
- */
-/** @jsxImportSource @emotion/react */
 import React from 'react';
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
     /**

package/dist/types/checkbox/Checkbox.style.d.ts

@@ -1,13 +1,35 @@
 /**
- * Checkbox 组件样式
+ * Checkbox 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-checkbox-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
+ * 使用 Styled Token System 实现样式：
+ * - JS Token 优先（来自 ThemeProvider，支持用户自定义）
+ * - CSS 变量作为 fallback（无 Provider 时的兜底）
  */
+export declare const CheckboxContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const CheckboxControl: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isHovered?: boolean;
+    isChecked?: boolean;
+    isIndeterminate?: boolean;
+    isDisabled?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const CheckboxIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isChecked?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const CheckboxLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isDisabled?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const checkboxContainer: import("@emotion/react").SerializedStyles;
 export declare const checkboxControl: import("@emotion/react").SerializedStyles;
 export declare const checkboxIcon: import("@emotion/react").SerializedStyles;

package/dist/types/checkbox/CheckboxButton.d.ts

@@ -1,14 +1,3 @@
-/**
- * CheckboxButton 组件 - 按钮风格的 Checkbox
- *
- * 特性：
- * - 按钮样式的 checkbox 外观
- * - 右下角显示勾选标记
- * - 支持受控/非受控模式
- *
- * 使用 CSS 变量的三层 Token 体系，无需 ThemeProvider
- */
-/** @jsxImportSource @emotion/react */
 import React from 'react';
 import type { CheckboxButtonSize } from './CheckboxButton.style';
 export interface CheckboxButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'indeterminate'> {
@@ -45,10 +34,5 @@ export interface CheckboxButtonProps extends Omit<React.InputHTMLAttributes<HTML
      */
     style?: React.CSSProperties;
 }
-/**
- * CheckboxButton - 按钮风格的复选框组件
- *
- * 按照设计稿，呈现为按钮样式，右下角带勾选标记
- */
 export declare const CheckboxButton: React.ForwardRefExoticComponent<CheckboxButtonProps & React.RefAttributes<HTMLInputElement>>;
 export default CheckboxButton;

package/dist/types/checkbox/CheckboxButton.style.d.ts

@@ -1,17 +1,9 @@
 /**
- * CheckboxButton 组件样式
+ * CheckboxButton 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-checkbox-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
- *
- * 设计规范：
- * - 按钮样式的 checkbox
- * - 右下角勾选标记
- * - 完整的交互状态
+ * 使用 Styled Token System 实现样式：
+ * - JS Token 优先（来自 ThemeProvider，支持用户自定义）
+ * - CSS 变量作为 fallback（无 Provider 时的兜底）
  */
 export type CheckboxButtonSize = 'sm' | 'md' | 'lg';
 interface CheckboxButtonSizeConfig {
@@ -25,6 +17,26 @@ interface CheckboxButtonSizeConfig {
     checkmarkIcon: number;
 }
 export declare const checkboxButtonSizeTokens: Record<CheckboxButtonSize, CheckboxButtonSizeConfig>;
+export declare const CheckboxButtonContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const CheckboxButtonWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size: CheckboxButtonSize;
+    isHovered?: boolean;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const CheckboxButtonCheckmark: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size: CheckboxButtonSize;
+    isDisabled?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const checkboxButtonContainer: import("@emotion/react").SerializedStyles;
 export declare const checkboxButtonWrapper: (size?: CheckboxButtonSize) => import("@emotion/react").SerializedStyles;
 export declare const checkboxButtonCheckmark: (size?: CheckboxButtonSize) => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,122 @@
+/**
+ * Checkbox Styled Tokens
+ *
+ * 将 Checkbox 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Checkbox 组件的 Styled Tokens
+ */
+export declare const $checkbox: {
+    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 controlBgChecked: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlBgDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly controlBgDisabledChecked: (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 controlBorderDisabledChecked: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly iconColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly iconSize: (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 labelLineHeight: (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 labelFontWeight: (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/checkbox/tokens.d.ts

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