@kingsoft-ai/design 0.1.9

package/dist/types/stepper/Step.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { type StepperOrientation, type StepperLabelPlacement, type StepStatus, type StepSize, type StepperVariant } from './Stepper.style';
+export interface StepProps {
+    /** Title of the step */
+    title?: ReactNode;
+    /** Description of the step */
+    description?: ReactNode;
+    /** Icon of the step */
+    icon?: ReactNode;
+    /** Status of the step, determined by Stepper if not provided */
+    status?: StepStatus;
+    /** Disable the step */
+    disabled?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    className?: string;
+    index?: number;
+    orientation?: StepperOrientation;
+    labelPlacement?: StepperLabelPlacement;
+    size?: StepSize;
+    last?: boolean;
+    variant?: StepperVariant;
+}
+export declare const Step: import("react").ForwardRefExoticComponent<StepProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/stepper/Stepper.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import { type StepperOrientation, type StepperLabelPlacement, type StepSize, type StepperVariant } from './Stepper.style';
+export interface StepperProps {
+    /** Current active step index (0-indexed) */
+    active?: number;
+    /** Orientation of the stepper */
+    orientation?: StepperOrientation;
+    /** Label placement (only for horizontal orientation) */
+    labelPlacement?: StepperLabelPlacement;
+    /** Size of the stepper */
+    size?: StepSize;
+    /** Visual variant */
+    variant?: StepperVariant;
+    /** Children (Step components) */
+    children: ReactNode;
+    className?: string;
+    /** Callback when step is clicked */
+    onChange?: (index: number) => void;
+}
+export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/stepper/Stepper.style.d.ts

@@ -0,0 +1,57 @@
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperLabelPlacement = 'right' | 'bottom';
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+export type StepSize = 'md' | 'sm';
+export type StepperVariant = 'default' | 'dot';
+export declare const StepperRoot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    orientation: StepperOrientation;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepRoot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    orientation: StepperOrientation;
+    labelPlacement: StepperLabelPlacement;
+    status: StepStatus;
+    isLast: boolean;
+    flexBasis?: string;
+    variant: StepperVariant;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepIconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    status: StepStatus;
+    size: StepSize;
+    variant: StepperVariant;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    orientation: StepperOrientation;
+    labelPlacement: StepperLabelPlacement;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    status: StepStatus;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepDescription: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepConnector: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    orientation: StepperOrientation;
+    labelPlacement: StepperLabelPlacement;
+    isFinished: boolean;
+    size: StepSize;
+    variant: StepperVariant;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,3 @@
+export * from './Stepper';
+export * from './Step';
+export type { StepperOrientation, StepperLabelPlacement, StepStatus, StepSize, StepperVariant, } from './Stepper.style';

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

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

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

@@ -0,0 +1,68 @@
+/**
+ * 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';
+import { type SwitchSize } from './Switch.style';
+export declare const SIZES: readonly ["sm", "md"];
+export type SwitchProps = Omit<AriaSwitchProps, 'children' | 'isDisabled'> & Omit<ToggleProps, 'children' | 'isDisabled'> & {
+    /** 开关尺寸：小号(20px)、标准(24px) */
+    size?: SwitchSize;
+    /** 选中状态的文字标签（显示在开关内部） */
+    checkedLabel?: string;
+    /** 未选中状态的文字标签（显示在开关内部） */
+    uncheckedLabel?: string;
+    /** 是否禁用（替代 isDisabled） */
+    disabled?: boolean;
+    /** 外部描述性标签（显示在开关旁边） */
+    children?: ReactNode;
+    /** 自定义类名 */
+    className?: string;
+};
+/**
+ * Switch 开关组件
+ *
+ * 基于 Figma 设计规范实现的开关组件，支持带文字的开关
+ * 使用 react-aria 保证无障碍访问性
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<AriaSwitchProps, "isDisabled" | "children"> & Omit<ToggleProps, "isDisabled" | "children"> & {
+    /** 开关尺寸：小号(20px)、标准(24px) */
+    size?: SwitchSize;
+    /** 选中状态的文字标签（显示在开关内部） */
+    checkedLabel?: string;
+    /** 未选中状态的文字标签（显示在开关内部） */
+    uncheckedLabel?: string;
+    /** 是否禁用（替代 isDisabled） */
+    disabled?: boolean;
+    /** 外部描述性标签（显示在开关旁边） */
+    children?: ReactNode;
+    /** 自定义类名 */
+    className?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,100 @@
+/**
+ * Switch 开关样式
+ *
+ * 基于三层 Token 体系：
+ * - Tier 1 (Global): 全局基础值
+ * - Tier 2 (Semantic): 语义化映射
+ * - Tier 3 (Component): 组件专用 Token
+ *
+ * 完全还原 Figma 设计稿规范
+ * 支持带文字的开关组件（如 ON/OFF、开/关）
+ */
+export declare const switchSizes: readonly ["sm", "md"];
+export type SwitchSize = (typeof switchSizes)[number];
+/**
+ * Switch 根元素（label 标签）
+ *
+ * 特性：
+ * - 基于三层 Token 设计
+ * - 完整的交互状态（hover, focus, disabled）
+ * - 支持带文字的开关
+ * - 平滑的动画过渡
+ */
+export declare const SwitchRoot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size: SwitchSize;
+    isSelected: boolean;
+    isDisabled: boolean;
+    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;
+} & {
+    isSelected: boolean;
+    hasInnerLabel: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/**
+ * Switch 文字标签
+ *
+ * 显示开关状态文字（如 ON/OFF、开/关）
+ * 使用 Tier 3 组件层文字 Token
+ *
+ * 使用相对定位，不影响滑块的绝对定位计算
+ */
+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）
+ *
+ * 白色圆形滑块，根据开关状态滑动
+ * 使用 Tier 3 组件层滑块 Token
+ *
+ * 使用绝对定位 + 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;
+} & {
+    isDisabled: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -0,0 +1,14 @@
+/**
+ * Switch 组件测试
+ *
+ * 测试覆盖：
+ * - 基础渲染
+ * - 尺寸 (sm, md)
+ * - 受控/非受控模式
+ * - 交互状态 (click, keyboard)
+ * - 禁用状态
+ * - 带文字标签
+ * - 外部标签
+ * - 无障碍性
+ */
+export {};

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

@@ -0,0 +1,6 @@
+/**
+ * Switch 开关组件导出
+ */
+export { Switch, SIZES as SWITCH_SIZES } from './Switch';
+export type { SwitchProps } from './Switch';
+export type { SwitchSize } from './Switch.style';

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

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

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

@@ -0,0 +1,88 @@
+import { type ReactNode } from 'react';
+import { type TableSize, type TableVariant } from './Table.style';
+export type { TableSize, TableVariant } from './Table.style';
+export declare const SIZES: readonly ["sm", "md", "lg"];
+export declare const VARIANTS: readonly ["default", "bordered", "striped"];
+export interface TableColumn<T = any> {
+    /** 列唯一标识 */
+    key: string;
+    /** 列标题 */
+    title?: ReactNode;
+    /** 列宽度 */
+    width?: number | string;
+    /** 对齐方式 */
+    align?: 'left' | 'center' | 'right';
+    /** 是否可排序 */
+    sortable?: boolean;
+    /** 固定列 */
+    fixed?: 'left' | 'right';
+    /** 自定义渲染 */
+    render?: (value: any, record: T, index: number) => ReactNode;
+    /** 是否省略文本 */
+    ellipsis?: boolean;
+}
+export interface TableDataSource<T = any> {
+    /** 唯一标识 */
+    id: string | number;
+    /** 子数据（用于树形结构） */
+    children?: TableDataSource<T>[];
+    /** 其他数据字段 */
+    [key: string]: any;
+}
+export interface TableProps<T extends Record<string, any> = Record<string, any>> {
+    /** 列配置 */
+    columns: TableColumn<T>[];
+    /** 数据源 */
+    dataSource: T[];
+    /** 表格尺寸 */
+    size?: TableSize;
+    /** 表格变体 */
+    variant?: TableVariant;
+    /** 是否显示边框 */
+    bordered?: boolean;
+    /** 是否全宽 */
+    fullWidth?: boolean;
+    /** 滚动配置 */
+    scroll?: {
+        /** 横向滚动宽度 */
+        x?: number | string;
+        /** 纵向滚动高度 */
+        y?: number | string;
+    };
+    /** 是否可选择 */
+    selectable?: boolean;
+    /** 选择类型 */
+    selectionMode?: 'single' | 'multiple';
+    /** 选中的行 */
+    selectedKeys?: Set<string | number> | 'all';
+    /** 选中行变化回调 */
+    onSelectionChange?: (keys: Set<string | number> | 'all') => void;
+    /** 是否可展开 */
+    expandable?: boolean;
+    /** 展开的行 */
+    expandedKeys?: Set<string | number>;
+    /** 展开行变化回调 */
+    onExpandChange?: (keys: Set<string | number>) => void;
+    /** 自定义展开内容 */
+    expandedRowRender?: (record: T, index: number) => ReactNode;
+    /** 排序配置 */
+    sortConfig?: {
+        key: string;
+        direction: 'asc' | 'desc' | null;
+    };
+    /** 排序变化回调 */
+    onSortChange?: (key: string, direction: 'asc' | 'desc' | null) => void;
+    /** 行点击事件 */
+    onRowClick?: (record: T, index: number) => void;
+    /** 空数据展示 */
+    emptyText?: ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 是否允许折行 */
+    wrapText?: boolean;
+    /** Loading 状态 */
+    loading?: boolean;
+}
+export declare const Table: <T extends Record<string, any> = Record<string, any>>(props: TableProps<T> & {
+    ref?: React.ForwardedRef<HTMLTableElement>;
+}) => React.ReactElement;

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

@@ -0,0 +1,97 @@
+/**
+ * Table 样式定义
+ *
+ * 基于 Figma 设计稿的表格样式实现
+ */
+export declare const tableSizes: readonly ["sm", "md", "lg"];
+export type TableSize = (typeof tableSizes)[number];
+export declare const tableVariants: readonly ["default", "bordered", "striped"];
+export type TableVariant = (typeof tableVariants)[number];
+export declare const TableContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size?: TableSize;
+    fullWidth?: boolean;
+    scrollX?: number | string;
+    scrollY?: number | string;
+    showScrollbar?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size?: TableSize;
+    variant?: TableVariant;
+    scrollX?: number | string;
+}, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const TableHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
+export declare const TableHeaderRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export declare const TableHeaderCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size?: TableSize;
+    sortable?: boolean;
+    fixed?: "left" | "right";
+    align?: "left" | "center" | "right";
+    width?: number | string;
+}, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
+export declare const SortIndicator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    direction?: "asc" | "desc" | null;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TableBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
+export declare const TableRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    selectable?: boolean;
+    selected?: boolean;
+    expandable?: boolean;
+    expanded?: boolean;
+    isSubRow?: boolean;
+    level?: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export declare const TableCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size?: TableSize;
+    fixed?: "left" | "right";
+    align?: "left" | "center" | "right";
+    width?: number | string;
+    level?: number;
+}, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+export declare const CheckboxCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ExpandButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    expanded?: boolean;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const EmptyState: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CellContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    ellipsis?: boolean;
+    wrapText?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,2 @@
+export { Table, SIZES as TABLE_SIZES, VARIANTS as TABLE_VARIANTS } from './Table';
+export type { TableProps, TableColumn, TableDataSource, TableSize, TableVariant } from './Table';

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

@@ -0,0 +1,80 @@
+/**
+ * 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';
+export type { TagVariant, TagSize, TagColor };
+export interface TagProps {
+    /** 标签变体：默认 | 可选择 */
+    variant?: TagVariant;
+    /** 标签尺寸：小号(18px) | 中号(24px) | 大号(32px) */
+    size?: TagSize;
+    /** 标签颜色 */
+    color?: TagColor;
+    /** 是否显示边框（仅彩色标签适用） */
+    bordered?: boolean;
+    /** 是否可关闭 */
+    closable?: boolean;
+    /** 是否可选择（checkable 变体） */
+    checkable?: boolean;
+    /** 是否已选中（checkable 变体） */
+    checked?: boolean;
+    /** 前置图标 */
+    icon?: ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 子元素 */
+    children?: ReactNode;
+    /** 关闭回调 */
+    onClose?: () => void;
+    /** 选中状态变化回调（checkable 变体） */
+    onChange?: (checked: boolean) => void;
+    /** 点击回调 */
+    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;
+    /** 子元素 */
+    children?: ReactNode;
+}
+/**
+ * Tag.Add 添加标签按钮
+ *
+ * 用于添加新标签的按钮组件
+ */
+export declare const TagAdd: import("react").ForwardRefExoticComponent<TagAddProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,83 @@
+/**
+ * Tag 标签样式
+ *
+ * 基于三层 Token 体系：
+ * - Tier 1 (Global): 全局基础值
+ * - Tier 2 (Semantic): 语义化映射
+ * - Tier 3 (Component): 组件专用 Token
+ *
+ * 完全还原 Figma 设计稿规范
+ */
+export declare const tagVariants: readonly ["default", "checkable"];
+export declare const tagSizes: readonly ["sm", "md", "lg"];
+export declare const tagColors: readonly ["default", "red", "orange", "yellow", "green", "lavender", "lilac", "carmine", "rose", "mint", "olive", "blue"];
+export type TagVariant = (typeof tagVariants)[number];
+export type TagSize = (typeof tagSizes)[number];
+export type TagColor = (typeof tagColors)[number];
+/**
+ * Tag 根元素
+ *
+ * 特性：
+ * - 基于三层 Token 设计
+ * - 支持多种颜色和变体
+ * - 完整的交互状态（hover, active, disabled）
+ * - 支持边框和无边框模式
+ */
+export declare const TagRoot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    variant: TagVariant;
+    size: TagSize;
+    color: TagColor;
+    bordered: boolean;
+    checked: boolean;
+    closable: boolean;
+    isDisabled: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/**
+ * Tag 内容容器
+ *
+ * 用于布局图标和文本
+ */
+export declare const TagContent: 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>, {}>;
+/**
+ * 关闭按钮
+ *
+ * 使用 span 而非 button，避免在 Select 等组件中嵌套 button 导致的 HTML 错误
+ *
+ * 特性：
+ * - 独立的交互区域
+ * - hover 时显示反馈
+ */
+export declare const CloseButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size: TagSize;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/**
+ * 添加按钮（New Tag）
+ *
+ * 专门用于添加新标签的按钮样式
+ */
+export declare const AddButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size: TagSize;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;