@zjpcy/simple-design 1.3.0 → 1.3.1

package/dist/types/Transfer/types.d.ts

@@ -0,0 +1,232 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * Transfer 数据项接口
+ * 支持自定义字段名，通过 fieldNames 属性指定 key 和 title 对应的字段
+ */
+export interface TransferItem {
+    /** 唯一标识（默认字段名，可通过 fieldNames.key 自定义） */
+    key?: string;
+    /** 显示标题（默认字段名，可通过 fieldNames.title 自定义） */
+    title?: ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 允许自定义字段 */
+    [key: string]: any;
+}
+/**
+ * 自定义字段名称接口
+ */
+export interface FieldNames {
+    /** 唯一标识字段名，默认 'key' */
+    key?: string;
+    /** 显示标题字段名，默认 'title' */
+    title?: string;
+}
+/**
+ * Transfer 组件属性接口
+ */
+export interface TransferProps {
+    /** 数据源 */
+    dataSource: TransferItem[];
+    /** 自定义字段名称 */
+    fieldNames?: FieldNames;
+    /** 右侧已选中的 key 集合 */
+    targetKeys?: string[];
+    /** 默认已选中的 key 集合（非受控模式） */
+    defaultTargetKeys?: string[];
+    /** 不可选择的 key 集合 */
+    selectedKeys?: string[];
+    /** 默认已选择的 key 集合（非受控模式） */
+    defaultSelectedKeys?: string[];
+    /** 是否显示搜索框 */
+    showSearch?: boolean;
+    /** 是否禁用整个组件 */
+    disabled?: boolean;
+    /** 左侧标题 */
+    leftTitle?: ReactNode;
+    /** 右侧标题 */
+    rightTitle?: ReactNode;
+    /** 左侧描述信息，显示在列表下方 */
+    leftDescription?: ReactNode;
+    /** 右侧描述信息，显示在列表下方 */
+    rightDescription?: ReactNode;
+    /** 自定义筛选函数 */
+    filterOption?: (inputValue: string, item: TransferItem) => boolean;
+    /** 自定义样式 */
+    styles?: {
+        wrapper?: CSSProperties;
+        list?: CSSProperties;
+        item?: CSSProperties;
+        search?: CSSProperties;
+        operation?: CSSProperties;
+    };
+    /** 列表高度，默认 300px */
+    listHeight?: number | string;
+    /** 列表宽度，默认 200px */
+    listWidth?: number | string;
+    /** 选中项发生改变时的回调 */
+    onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
+    /** 选项在两栏之间转移时的回调 */
+    onChange?: (targetKeys: string[], direction: 'left' | 'right', moveKeys: string[]) => void;
+    /** 搜索框内容变化时的回调 */
+    onSearch?: (direction: 'left' | 'right', value: string) => void;
+    /** 自定义渲染每一项 */
+    render?: (item: TransferItem) => ReactNode;
+    /** 自定义 header，传入 null 则不显示 header 区域 */
+    header?: (props: {
+        direction: 'left' | 'right';
+        dataSource: TransferItem[];
+        selectedKeys: string[];
+        sourceSelectedKeys: string[];
+        targetSelectedKeys: string[];
+    }) => ReactNode | null;
+    /** 自定义搜索区域，传入此函数则替换默认搜索框 */
+    search?: (props: {
+        direction: 'left' | 'right';
+        value: string;
+        onChange: (value: string) => void;
+        disabled?: boolean;
+    }) => ReactNode;
+    /** 自定义 body 渲染，传入此函数则使用自定义内容替换默认列表 */
+    body?: (props: {
+        direction: 'left' | 'right';
+        dataSource: TransferItem[];
+        selectedKeys: string[];
+        sourceSelectedKeys: string[];
+        targetSelectedKeys: string[];
+        onSelectChange: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
+    }) => ReactNode;
+    /** 自定义 footer */
+    footer?: (props: {
+        direction: 'left' | 'right';
+    }) => ReactNode;
+    /** 自定义行样式 */
+    rowClassName?: (item: TransferItem) => string;
+    /** 模式，transfer 为双栏穿梭模式（默认），single 为单栏选择模式 */
+    mode?: 'transfer' | 'single';
+    /** 是否显示加载状态 */
+    loading?: boolean;
+    /** 自定义 loading 渲染 */
+    loadingRender?: () => ReactNode;
+    /** 加载延迟时间（毫秒），设置后loading状态会在指定时间后自动取消 */
+    loadingDelay?: number;
+    /** 是否开启懒加载，默认 false */
+    lazyLoad?: boolean;
+    /** 懒加载阈值，距离底部多少像素时触发加载，默认 100 */
+    lazyLoadThreshold?: number;
+    /** 懒加载回调，当滚动到阈值位置时触发，用于加载下一组数据 */
+    onLazyLoad?: (direction: 'left' | 'right') => void;
+}
+/**
+ * Transfer 列表属性接口
+ */
+export interface TransferListProps {
+    /** 列表数据 */
+    dataSource: TransferItem[];
+    /** 自定义字段名称 */
+    fieldNames?: FieldNames;
+    /** 已选中的 key 集合 */
+    selectedKeys: string[];
+    /** 源列表已选中的 key 集合 */
+    sourceSelectedKeys: string[];
+    /** 目标列表已选中的 key 集合 */
+    targetSelectedKeys: string[];
+    /** 是否显示搜索框 */
+    showSearch: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 列表标题 */
+    title?: ReactNode;
+    /** 列表描述 */
+    description?: ReactNode;
+    /** 搜索框占位符 */
+    searchPlaceholder?: string;
+    /** 自定义筛选函数 */
+    filterOption?: (inputValue: string, item: TransferItem) => boolean;
+    /** 自定义样式 */
+    styles?: TransferProps['styles'];
+    /** 列表高度 */
+    listHeight?: number | string;
+    /** 列表宽度 */
+    listWidth?: number | string;
+    /** 选中项改变回调 */
+    onSelectChange: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
+    /** 搜索回调 */
+    onSearch?: (value: string) => void;
+    /** 自定义渲染 */
+    render?: (item: TransferItem) => ReactNode;
+    /** 自定义 header */
+    header?: (props: {
+        direction: 'left' | 'right';
+        dataSource: TransferItem[];
+        selectedKeys: string[];
+        sourceSelectedKeys: string[];
+        targetSelectedKeys: string[];
+    }) => ReactNode | null;
+    /** 自定义搜索区域 */
+    search?: (props: {
+        direction: 'left' | 'right';
+        value: string;
+        onChange: (value: string) => void;
+        disabled?: boolean;
+    }) => ReactNode;
+    /** 自定义 body */
+    body?: (props: {
+        direction: 'left' | 'right';
+        dataSource: TransferItem[];
+        selectedKeys: string[];
+        sourceSelectedKeys: string[];
+        targetSelectedKeys: string[];
+        onSelectChange: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
+    }) => ReactNode;
+    /** 自定义 footer */
+    footer?: (props: {
+        direction: 'left' | 'right';
+    }) => ReactNode;
+    /** 方向标识 */
+    direction: 'left' | 'right';
+    /** 自定义行样式 */
+    rowClassName?: (item: TransferItem) => string;
+    /** 是否显示加载状态 */
+    loading?: boolean;
+    /** 自定义 loading 渲染 */
+    loadingRender?: () => ReactNode;
+    /** 加载延迟时间（毫秒），设置后loading状态会在指定时间后自动取消 */
+    loadingDelay?: number;
+    /** 是否开启懒加载，默认 false */
+    lazyLoad?: boolean;
+    /** 懒加载阈值，距离底部多少像素时触发加载，默认 100 */
+    lazyLoadThreshold?: number;
+    /** 懒加载回调，当滚动到阈值位置时触发，用于加载下一组数据 */
+    onLazyLoad?: () => void;
+}
+/**
+ * Transfer 操作按钮属性接口
+ */
+export interface TransferOperationProps {
+    /** 是否禁用移动到右侧按钮 */
+    moveToRightDisabled?: boolean;
+    /** 是否禁用移动到左侧按钮 */
+    moveToLeftDisabled?: boolean;
+    /** 移动到右侧回调 */
+    onMoveToRight: () => void;
+    /** 移动到左侧回调 */
+    onMoveToLeft: () => void;
+    /** 自定义样式 */
+    style?: CSSProperties;
+}
+/**
+ * Transfer 搜索框属性接口
+ */
+export interface TransferSearchProps {
+    /** 占位符文本 */
+    placeholder?: string;
+    /** 当前值 */
+    value?: string;
+    /** 值变化回调 */
+    onChange: (value: string) => void;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 自定义样式 */
+    style?: CSSProperties;
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { TreeProps, TreeNode } from './types';
+import './Tree.css';
+export type { TreeProps, TreeNode, TreeNodeTooltip } from './types';
+export interface TreeRef {
+    scrollTo: (key: string | number) => void;
+    addNode: (parentKey: string | number | null, newNode: TreeNode | TreeNode[]) => void;
+    removeNode: (key: string | number) => boolean;
+    updateNode: (key: string | number, updates: Partial<Omit<TreeNode, 'key' | 'children'>>) => boolean;
+}
+export declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<TreeRef>>;
+export default Tree;

package/dist/types/Tree/styles.d.ts

@@ -0,0 +1,54 @@
+import { CSSProperties } from 'react';
+export declare const treeContainerStyle: CSSProperties;
+export declare const treeNodeStyle: CSSProperties;
+export declare const treeTreenodeStyle: CSSProperties;
+export declare const treeNodeDisabledStyle: CSSProperties;
+export declare const treeNodeContentStyle: CSSProperties;
+export declare const treeNodeContentHoverStyle: CSSProperties;
+export declare const treeNodeSelectedStyle: CSSProperties;
+export declare const treeNodeSelectedHoverStyle: CSSProperties;
+export declare const treeIndentStyle: CSSProperties;
+export declare const treeSwitcherStyle: CSSProperties;
+export declare const treeSwitcherHoverStyle: CSSProperties;
+export declare const treeSwitcherCloseStyle: CSSProperties;
+export declare const treeSwitcherOpenStyle: CSSProperties;
+export declare const treeCheckboxStyle: CSSProperties;
+export declare const treeCheckboxHoverStyle: CSSProperties;
+export declare const treeCheckboxCheckedStyle: CSSProperties;
+export declare const treeCheckboxIndeterminateStyle: CSSProperties;
+export declare const treeCheckboxDisabledStyle: CSSProperties;
+export declare const treeIconStyle: CSSProperties;
+export declare const treeIconSelectedStyle: CSSProperties;
+export declare const treeTitleStyle: CSSProperties;
+export declare const treeChildTreeStyle: CSSProperties;
+export declare const getMotionStyle: (duration: number, expanded: boolean) => CSSProperties;
+export declare const treeLoadingStyle: CSSProperties;
+export declare const treeLoadingIconStyle: CSSProperties;
+export declare const treeSearchStyle: CSSProperties;
+export declare const treeSearchInputStyle: CSSProperties;
+export declare const treeSearchInputFocusStyle: CSSProperties;
+export declare const treeSearchInputHoverStyle: CSSProperties;
+export declare const treeHighlightStyle: CSSProperties;
+export declare const treeEmptyStyle: CSSProperties;
+export declare const treeEmptyIconStyle: CSSProperties;
+export declare const treeDraggableStyle: CSSProperties;
+export declare const treeDraggingStyle: CSSProperties;
+export declare const treeDragOverStyle: CSSProperties;
+export declare const treeDropTargetStyle: CSSProperties;
+export declare const treeLineStyle: CSSProperties;
+export declare const treeLinePointStyle: CSSProperties;
+export declare const getNodeClassNames: (prefixCls: string, options: {
+    selected?: boolean;
+    disabled?: boolean;
+    draggable?: boolean;
+    dragOver?: boolean;
+    isLeaf?: boolean;
+    showLine?: boolean;
+}) => string;
+export declare const getContentClassNames: (prefixCls: string, selected?: boolean) => string;
+export declare const getCheckboxClassNames: (prefixCls: string, options: {
+    checked?: boolean;
+    halfChecked?: boolean;
+    disabled?: boolean;
+}) => string;
+export declare const getSwitcherClassNames: (prefixCls: string, expanded?: boolean) => string;

package/dist/types/Tree/types.d.ts

@@ -0,0 +1,202 @@
+import * as React from 'react';
+/** Tooltip 配置 */
+export interface TreeNodeTooltip {
+    /** Tooltip 内容 */
+    title?: React.ReactNode;
+    /** 位置 */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** 触发方式 */
+    trigger?: 'hover' | 'click';
+    /** 延迟显示时间（毫秒） */
+    delay?: number;
+    /** 自定义背景色 */
+    backgroundColor?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+}
+export interface TreeNode {
+    /** 节点唯一标识 */
+    key: string | number;
+    /** 节点标题 */
+    title: React.ReactNode;
+    /** 节点图标 */
+    icon?: React.ReactNode;
+    /** 子节点 */
+    children?: TreeNode[];
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否禁用复选框 */
+    disableCheckbox?: boolean;
+    /** 是否选中 */
+    checked?: boolean;
+    /** 是否半选 */
+    halfChecked?: boolean;
+    /** 是否展开 */
+    expanded?: boolean;
+    /** 是否叶子节点 */
+    isLeaf?: boolean;
+    /** 加载中 */
+    loading?: boolean;
+    /** 节点类名 */
+    className?: string;
+    /** 节点样式 */
+    style?: React.CSSProperties;
+    /** 自定义渲染 */
+    render?: (node: TreeNode) => React.ReactNode;
+    /** 节点拖拽相关 */
+    draggable?: boolean;
+    /** Tooltip 配置，默认不启用 */
+    tooltip?: TreeNodeTooltip | boolean;
+}
+export interface TreeProps {
+    /** 树数据 */
+    treeData?: TreeNode[];
+    /** 默认展开的键 */
+    defaultExpandedKeys?: (string | number)[];
+    /** 展开的键（受控） */
+    expandedKeys?: (string | number)[];
+    /** 展开/收起回调 */
+    onExpand?: (expandedKeys: (string | number)[], { expanded, node, nativeEvent }: {
+        expanded: boolean;
+        node: TreeNode;
+        nativeEvent: MouseEvent;
+    }) => void;
+    /** 默认选中的键 */
+    defaultSelectedKeys?: (string | number)[];
+    /** 选中的键（受控） */
+    selectedKeys?: (string | number)[];
+    /** 选中回调 */
+    onSelect?: (selectedKeys: (string | number)[], { selected, node, nativeEvent }: {
+        selected: boolean;
+        node: TreeNode;
+        nativeEvent: MouseEvent;
+    }) => void;
+    /** 默认勾选的键 */
+    defaultCheckedKeys?: (string | number)[];
+    /** 勾选的键（受控） */
+    checkedKeys?: (string | number)[];
+    /** 勾选回调 */
+    onCheck?: (checkedKeys: (string | number)[], { checked, node, nativeEvent }: {
+        checked: boolean;
+        node: TreeNode;
+        nativeEvent: MouseEvent;
+    }) => void;
+    /** 是否显示复选框 */
+    checkable?: boolean;
+    /** 是否父子关联 */
+    checkStrictly?: boolean;
+    /** 是否支持多选 */
+    multiple?: boolean;
+    /** 是否支持搜索 */
+    showSearch?: boolean;
+    /** 搜索匹配高亮 */
+    filterOption?: (search: string, node: TreeNode) => boolean;
+    /** 自定义搜索匹配渲染 */
+    renderSearch?: (search: string, node: TreeNode) => React.ReactNode;
+    /** 是否显示连接线 */
+    showLine?: boolean;
+    /** 是否显示缩进标识 */
+    showIndent?: boolean;
+    /** 是否显示图标 */
+    showIcon?: boolean;
+    /** 是否异步加载数据 */
+    loadData?: (node: TreeNode) => Promise<void>;
+    /** 动画时长（毫秒） */
+    motionDuration?: number;
+    /** 是否支持拖拽 */
+    draggable?: boolean;
+    /** 拖拽开始回调 */
+    onDragStart?: (params: {
+        event: MouseEvent;
+        node: TreeNode;
+    }) => void;
+    /** 拖拽进入回调 */
+    onDragEnter?: (params: {
+        event: MouseEvent;
+        node: TreeNode;
+    }) => void;
+    /** 拖拽放置回调 */
+    onDrop?: (params: {
+        event: MouseEvent;
+        node: TreeNode;
+        dragNode: TreeNode;
+        dragPosition: 'before' | 'after' | 'inside';
+    }) => void;
+    /** 拖拽结束回调 */
+    onDragEnd?: (params: {
+        event: MouseEvent;
+        node: TreeNode;
+    }) => void;
+    /** 是否支持动态添加节点 */
+    addable?: boolean;
+    /** 是否支持删除节点 */
+    removable?: boolean;
+    /** 是否支持编辑节点 */
+    editable?: boolean;
+    /** 操作按钮显示模式：'inline' 行内显示 | 'dropdown' 下拉菜单 */
+    actionDisplayMode?: 'inline' | 'dropdown';
+    /** 添加节点回调 - 返回新节点的初始数据 */
+    onAddNode?: (parentNode: TreeNode) => TreeNode | TreeNode[] | void;
+    /** 删除节点回调 - 返回 false 可阻止删除 */
+    onRemoveNode?: (node: TreeNode) => boolean | void;
+    /** 编辑节点回调 - 返回编辑后的标题 */
+    onEditNode?: (node: TreeNode, newTitle: string) => string | void;
+    /** 自定义节点渲染 */
+    renderNode?: (node: TreeNode) => React.ReactNode;
+    /** 节点前渲染 */
+    prefixCls?: string;
+    /** 类名 */
+    className?: string;
+    /** 样式 */
+    style?: React.CSSProperties;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否自动展开父节点 */
+    autoExpandParent?: boolean;
+    /** 默认展开所有 */
+    defaultExpandAll?: boolean;
+    /** 展开动画 */
+    motion?: React.CSSProperties | ((node: TreeNode, isExpanded: boolean) => React.CSSProperties);
+    /** 全局 Tooltip 配置，默认关闭 */
+    tooltip?: TreeNodeTooltip | boolean;
+}
+export interface TreeNodeProps {
+    /** 节点数据 */
+    node: TreeNode;
+    /** 层级深度 */
+    level: number;
+    /** 是否展开 */
+    expanded: boolean;
+    /** 是否选中 */
+    selected: boolean;
+    /** 是否勾选 */
+    checked: boolean;
+    /** 是否半选 */
+    halfChecked: boolean;
+    /** 是否加载中 */
+    loading: boolean;
+    /** 是否叶子节点 */
+    isLeaf: boolean;
+    /** 父节点是否展开 */
+    parentExpanded: boolean;
+    /** 树组件属性 */
+    treeProps: TreeProps;
+    /** 展开节点 */
+    onExpand: (node: TreeNode, e: React.MouseEvent) => void;
+    /** 选择节点 */
+    onSelect: (node: TreeNode, e: React.MouseEvent) => void;
+    /** 勾选节点 */
+    onCheck: (node: TreeNode, e: React.MouseEvent | React.KeyboardEvent) => void;
+}
+export interface TreeState {
+    /** 展开的键集合 */
+    expandedKeys: (string | number)[];
+    /** 选中的键集合 */
+    selectedKeys: (string | number)[];
+    /** 勾选的键集合 */
+    checkedKeys: (string | number)[];
+    /** 加载中的键集合 */
+    loadingKeys: (string | number)[];
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { TreeSelectProps, TreeSelectNode, TreeSelectStyles } from './types';
+/**
+ * TreeSelect 树型选择器组件
+ * 用于在树形结构中选择数据，支持单选和多选
+ *
+ * @example
+ * ```tsx
+ * <TreeSelect
+ *   treeData={treeData}
+ *   placeholder="请选择"
+ *   onChange={(value) => console.log(value)}
+ * />
+ * <TreeSelect
+ *   treeData={treeData}
+ *   multiple
+ *   maxTagCount={2}
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+declare const TreeSelect: React.FC<TreeSelectProps>;
+export default TreeSelect;
+export type { TreeSelectProps, TreeSelectNode, TreeSelectStyles };

package/dist/types/TreeSelect/styles.d.ts

@@ -0,0 +1,56 @@
+import { TreeSelectStyles } from './types';
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $styles?: TreeSelectStyles["wrapper"];
+    $width?: number | string;
+}>> & string;
+export declare const Selection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $open: boolean;
+    $disabled: boolean;
+    $size: "large" | "middle" | "small";
+    $styles?: TreeSelectStyles["selection"];
+}>> & string;
+export declare const Rendered: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isPlaceholder: boolean;
+}>> & string;
+export declare const SelectionItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Tag: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size: "large" | "middle" | "small";
+    $styles?: TreeSelectStyles["tag"];
+}>> & string;
+export declare const TagContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TagClose: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const SearchWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const ClearIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size: "large" | "middle" | "small";
+}>> & string;
+export declare const ArrowIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $open: boolean;
+    $size: "large" | "middle" | "small";
+}>> & string;
+export declare const Dropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width?: number | string;
+    $height?: number | string;
+    $styles?: TreeSelectStyles["dropdown"];
+}>> & string;
+export declare const DropdownSearchWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownSearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const DropdownContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EmptyWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TreeNodeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $selected: boolean;
+    $disabled: boolean;
+    $level: number;
+    $styles?: TreeSelectStyles["treeNode"];
+}>> & string;
+export declare const ExpandIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $expanded: boolean;
+    $hasChildren: boolean;
+}>> & string;
+export declare const Checkbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const CheckboxInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $checked: boolean;
+}>> & string;
+export declare const NodeTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TreeNodeChildren: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;