@kingsoft-ai/design 0.1.18 → 0.2.6

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

@@ -0,0 +1,39 @@
+/**
+ * Checkbox 组件 Token 类型定义
+ */
+export interface CheckboxTokens {
+    control: {
+        size: string;
+        borderRadius: string;
+        borderWidth: string;
+        background: {
+            default: string;
+            checked: string;
+            disabled: string;
+            disabledChecked: string;
+        };
+        borderColor: {
+            default: string;
+            hover: string;
+            checked: string;
+            disabled: string;
+            disabledChecked: string;
+        };
+        icon: {
+            color: string;
+            size: string;
+        };
+    };
+    focusRing: string;
+    gap: string;
+    text: {
+        label: {
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            disabled: string;
+            fontWeight: number;
+        };
+    };
+    transition: string;
+}

package/dist/types/collapse/Collapse.d.ts

@@ -1,28 +1,3 @@
-/**
- * Collapse 折叠面板组件
- *
- * 可以折叠/展开的内容区域
- * 支持手风琴模式（同时只能展开一个）和普通模式（可同时展开多个）
- *
- * @example
- * ```tsx
- * // 非受控模式
- * <Collapse defaultActiveKey={['1']}>
- *   <CollapseItem itemKey="1" title="标题1">内容1</CollapseItem>
- *   <CollapseItem itemKey="2" title="标题2">内容2</CollapseItem>
- * </Collapse>
- *
- * // 受控模式 + 手风琴
- * <Collapse
- *   activeKey={activeKey}
- *   onChange={setActiveKey}
- *   accordion
- * >
- *   <CollapseItem itemKey="1" title="标题1">内容1</CollapseItem>
- *   <CollapseItem itemKey="2" title="标题2">内容2</CollapseItem>
- * </Collapse>
- * ```
- */
 import type { ReactNode } from 'react';
 export interface CollapseProps {
     /** 当前激活的面板（受控） */
@@ -37,14 +12,7 @@ export interface CollapseProps {
     children?: ReactNode;
     /** 自定义类名 */
     className?: string;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
 }
-/**
- * Collapse 折叠面板
- *
- * 特性：
- * - 支持受控和非受控模式
- * - 支持手风琴模式（accordion）
- * - 平滑的展开/收起动画
- * - 完整的键盘导航和无障碍支持
- */
 export declare const Collapse: import("react").ForwardRefExoticComponent<CollapseProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/collapse/Collapse.style.d.ts

@@ -1,15 +1,9 @@
 /**
- * Collapse 折叠面板样式
+ * Collapse 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-collapse-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
- */
-/**
- * 箭头旋转动画（展开）
+ * 使用 Styled Token System 实现样式：
+ * - JS Token 优先（来自 ThemeProvider，支持用户自定义）
+ * - CSS 变量作为 fallback（无 Provider 时的兜底）
  */
 export declare const rotateArrowDown: {
     name: string;
@@ -17,34 +11,22 @@ export declare const rotateArrowDown: {
     anim: 1;
     toString: () => string;
 } & string;
-/**
- * 箭头旋转动画（收起）
- */
 export declare const rotateArrowUp: {
     name: string;
     styles: string;
     anim: 1;
     toString: () => string;
 } & string;
-/**
- * Collapse 根容器
- */
 export declare const CollapseRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * CollapseItem 容器
- */
 export declare const CollapseItemWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     isLast?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 折叠面板标题栏
- */
 export declare const CollapseHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -52,39 +34,24 @@ export declare const CollapseHeader: import("@emotion/styled").StyledComponent<{
     isExpanded: boolean;
     isDisabled?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 箭头图标容器
- */
 export declare const ArrowWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     isExpanded: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 标题内容区
- */
 export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 标题文本
- */
 export declare const TitleText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
-/**
- * 右侧后缀内容区
- */
 export declare const SuffixWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 折叠内容外层容器
- */
 export declare const CollapseContentWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -92,18 +59,12 @@ export declare const CollapseContentWrapper: import("@emotion/styled").StyledCom
     isExpanded: boolean;
     contentHeight: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 折叠内容内层容器
- */
 export declare const CollapseContentInner: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     isExpanded: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 折叠内容文本区域
- */
 export declare const ContentText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

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

@@ -0,0 +1,77 @@
+/**
+ * Collapse Styled Tokens
+ *
+ * 将 Collapse 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Collapse 组件的 Styled Tokens
+ */
+export declare const $collapse: {
+    readonly border: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly divider: (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 text: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textTitle: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly arrow: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly arrowSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly headerPadding: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly contentPadding: (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;
+};

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * Collapse 组件 Token 类型定义
+ */
+export interface CollapseTokens {
+    border: {
+        default: string;
+    };
+    background: {
+        default: string;
+        hover: string;
+    };
+    text: {
+        default: string;
+        title: string;
+    };
+    divider: string;
+    arrow: {
+        default: string;
+    };
+    padding: {
+        header: string;
+        content: string;
+    };
+    borderRadius: string;
+    gap: string;
+    transition: string;
+    arrowSize: string;
+}

package/dist/types/context/ThemeContext.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Design Theme Context
+ *
+ * 独立的 Theme Context，用于解决 monorepo 中多个 emotion 实例导致的
+ * ThemeContext 无法正确传递的问题。
+ *
+ * 这个 Context 与 emotion 的 ThemeProvider 并行使用，确保 styled-components
+ * 可以通过 useDesignTheme hook 获取到正确的 theme。
+ */
+import { type ReactNode } from 'react';
+import type { AppTheme } from '@kingsoft-ai/theme';
+declare const DesignThemeContext: import("react").Context<AppTheme | null>;
+export interface DesignThemeContextProviderProps {
+    theme: AppTheme;
+    children: ReactNode;
+}
+export declare const DesignThemeContextProvider: ({ theme, children, }: DesignThemeContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 获取 Design Theme
+ *
+ * 优先从我们自己的 Context 获取，确保在 monorepo 环境下正确工作
+ */
+export declare const useDesignTheme: () => AppTheme | null;
+export { DesignThemeContext };

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

@@ -0,0 +1,2 @@
+export { DesignThemeContextProvider, useDesignTheme, DesignThemeContext, } from './ThemeContext';
+export type { DesignThemeContextProviderProps } from './ThemeContext';

package/dist/types/floatButton/FloatButton.d.ts

@@ -1,18 +1,3 @@
-/**
- * FloatButton 悬浮按钮组件
- *
- * 基于 react-aria 实现无障碍访问的悬浮按钮组件
- * 参考 antd FloatButton 设计实现
- *
- * @example
- * ```tsx
- * <FloatButton
- *   icon={<IconPlus />}
- *   type="primary"
- *   onClick={() => console.log('clicked')}
- * />
- * ```
- */
 import type { ReactNode } from 'react';
 import type { AriaButtonProps } from 'react-aria';
 import { type FloatButtonType, type FloatButtonShape, type FloatButtonSize, type TooltipPlacement } from './FloatButton.style';
@@ -48,10 +33,4 @@ export interface FloatButtonProps extends Omit<AriaButtonProps, 'elementType'> {
     /** 自定义样式 */
     style?: React.CSSProperties;
 }
-/**
- * FloatButton 悬浮按钮组件
- *
- * 用于页面中的悬浮操作按钮，通常固定在页面特定位置
- * 支持圆形和方形两种形状
- */
 export declare const FloatButton: import("react").ForwardRefExoticComponent<FloatButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/floatButton/FloatButton.style.d.ts

@@ -1,13 +1,3 @@
-/**
- * FloatButton 悬浮按钮样式
- *
- * 基于 CSS 变量的三层 Token 体系：
- * - Tier 1 (Global): 全局基础值 --ksd-colors-*, --ksd-spacing-*, etc.
- * - Tier 2 (Semantic): 语义化映射 --ksd-brand-*, --ksd-text-*, etc.
- * - Tier 3 (Component): 组件专用 Token --ksd-float-button-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
- */
 export declare const floatButtonTypes: readonly ["default", "primary"];
 export declare const floatButtonShapes: readonly ["circle", "square"];
 export declare const floatButtonSizes: readonly ["sm", "md", "lg"];
@@ -16,9 +6,6 @@ export type FloatButtonType = (typeof floatButtonTypes)[number];
 export type FloatButtonShape = (typeof floatButtonShapes)[number];
 export type FloatButtonSize = (typeof floatButtonSizes)[number];
 export type TooltipPlacement = (typeof tooltipPlacements)[number];
-/**
- * 悬浮按钮根元素
- */
 export declare const FloatButtonRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -28,37 +15,22 @@ export declare const FloatButtonRoot: import("@emotion/styled").StyledComponent<
     $size: FloatButtonSize;
     $isPressed: boolean;
 }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-/**
- * 按钮内容容器
- */
 export declare const FloatButtonContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * 图标包装器
- */
 export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * 描述文字
- */
 export declare const Description: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * Tooltip 包装器
- */
 export declare const TooltipWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * Tooltip 卡片
- */
 export declare const TooltipCard: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -66,9 +38,6 @@ export declare const TooltipCard: import("@emotion/styled").StyledComponent<{
     $placement: TooltipPlacement;
     $color?: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * Tooltip 箭头
- */
 export declare const TooltipArrow: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

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

@@ -0,0 +1,127 @@
+/**
+ * FloatButton Styled Tokens
+ *
+ * 将 FloatButton 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * FloatButton 组件的 Styled Tokens
+ */
+export declare const $floatButton: {
+    readonly defaultBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly defaultBgHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly defaultBgActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly defaultText: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly defaultBorder: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly defaultShadow: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly defaultShadowHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly primaryBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly primaryBgHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly primaryBgActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly primaryText: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly primaryBorder: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly primaryShadow: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly primaryShadowHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly disabledBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly disabledText: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly disabledOpacity: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lgSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly iconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly descriptionFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly descriptionLineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+};

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

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

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

@@ -0,0 +1,66 @@
+/**
+ * FloatButton 组件 Token 类型定义
+ */
+export interface FloatButtonTokens {
+    default: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+        };
+        shadow: {
+            default: string;
+            hover: string;
+        };
+    };
+    primary: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+        };
+        shadow: {
+            default: string;
+            hover: string;
+        };
+    };
+    disabled: {
+        background: {
+            default: string;
+        };
+        text: {
+            default: string;
+        };
+        opacity: number;
+    };
+    size: {
+        sm: {
+            size: string;
+        };
+        md: {
+            size: string;
+        };
+        lg: {
+            size: string;
+        };
+    };
+    icon: {
+        size: string;
+    };
+    description: {
+        fontSize: string;
+        lineHeight: string;
+    };
+}

package/dist/types/index.d.ts

@@ -20,10 +20,11 @@ export * from './transfer';
 export * from './upload';
 export * from './card';
 export * from './tooltip';
+export * from './slider';
 export * from './theme';
-export type { ThemeContext, TokenGenerator, DeepPartial } from './types/theme-utils';
 export { DesignThemeProvider } from './DesignThemeProvider';
 export type { DesignThemeProviderProps } from './DesignThemeProvider';
-export { CustomThemeProvider, globalColors, globalSpacing, globalRadii, globalTypography, globalShadows, globalGradients, lightSemantic, darkSemantic, } from '@kingsoft-ai/theme';
-export type { CustomThemeProviderProps, AppTheme, Theme, ComponentTheme, GlobalColors, GlobalColorScale, GlobalSpacing, GlobalRadii, GlobalTypography, GlobalShadows, GlobalGradients, SemanticColors, SemanticSpacing, SemanticBorderRadius, SemanticTypography, SemanticShadows, } from '@kingsoft-ai/theme';
-export * from './types/component-tokens.types';
+export { globalColors, globalSpacing, globalRadii, globalTypography, globalShadows, globalGradients, lightSemantic, darkSemantic, } from '@kingsoft-ai/theme';
+export type { AppTheme, Theme, ComponentTheme, GlobalColors, GlobalColorScale, GlobalSpacing, GlobalRadii, GlobalTypography, GlobalShadows, GlobalGradients, SemanticColors, SemanticSpacing, SemanticBorderRadius, SemanticTypography, SemanticShadows, } from '@kingsoft-ai/theme';
+export * from './types';
+export { token, createStyledTokens, tokenWhen, themeValue, } from './utils/styled-token';