@zjpcy/simple-design 1.2.10 → 1.3.0

package/dist/types/components/Progress/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ProgressProps, ProgressStatus, ProgressType } from './types';
+import { ProgressProps, ProgressStatus, ProgressType, ProgressSegment } from './types';
 import './Progress.css';
 declare const Progress: React.FC<ProgressProps>;
 export default Progress;
-export type { ProgressProps, ProgressType, ProgressStatus };
+export type { ProgressProps, ProgressType, ProgressStatus, ProgressSegment };

package/dist/types/components/Progress/types.d.ts

@@ -1,6 +1,21 @@
 import { ReactNode } from 'react';
 export type ProgressType = 'line' | 'circle' | 'dashboard';
 export type ProgressStatus = 'success' | 'exception' | 'active' | 'normal';
+/** 渐变色配置 */
+export interface GradientConfig {
+    from: string;
+    to: string;
+    direction?: 'to right' | 'to left' | 'to top' | 'to bottom' | 'to bottom right' | 'to top right' | 'to bottom left' | 'to top left';
+    /** 是否启用波浪动画 */
+    animated?: boolean;
+}
+/** 进度段配置 - 用于多段颜色展示 */
+export interface ProgressSegment {
+    /** 该段的颜色 */
+    color: string | GradientConfig;
+    /** 该段占总的百分比（0-100） */
+    percent: number;
+}
 export interface ProgressProps {
     /** 百分比 */
     percent?: number;
@@ -12,8 +27,8 @@ export interface ProgressProps {
     showInfo?: boolean;
     /** 自定义显示文字 */
     format?: (percent?: number, successPercent?: number) => ReactNode;
-    /** 成功进度条颜色 */
-    strokeColor?: string;
+    /** 进度条颜色，支持纯色字符串或渐变对象 */
+    strokeColor?: string | GradientConfig;
     /** 背景颜色 */
     trailColor?: string;
     /** 线条粗细 */
@@ -22,6 +37,10 @@ export interface ProgressProps {
     size?: 'small' | 'default' | 'large';
     /** 是否开启动画 */
     transition?: boolean;
+    /** 步骤进度条的总步数 */
+    steps?: number;
+    /** 多段颜色配置，用于展示多个进度段 */
+    segments?: ProgressSegment[];
     /** 是否开启仪表盘样式 */
     gapDegree?: number;
     /** 仪表盘缺口位置 */
@@ -32,6 +51,8 @@ export interface ProgressProps {
     prefix?: string;
     /** 后缀文字 */
     suffix?: string;
+    /** 自定义内部内容，支持 ReactNode，优先级高于默认的进度显示 */
+    children?: ReactNode;
     className?: string;
     style?: React.CSSProperties;
 }

package/dist/types/components/Select/index.d.ts

@@ -1,9 +1,28 @@
 import React from 'react';
-import { SelectProps, SelectOptionProps, SelectOptGroupProps } from './types';
+import { SelectProps, SelectOption, TagRenderProps } from './types';
 import './Select.css';
-declare const Select: React.FC<SelectProps> & {
-    Option: React.FC<SelectOptionProps>;
-    OptGroup: React.FC<SelectOptGroupProps>;
-};
+/**
+ * Select 下拉选择组件
+ * 用于从一组选项中选择一项或多项
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <Select
+ *   options={[
+ *     { value: '1', label: '选项1' },
+ *     { value: '2', label: '选项2' }
+ *   ]}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * // 多选模式
+ * <Select mode="multiple" options={options} />
+ *
+ * // 可搜索
+ * <Select searchable options={options} />
+ * ```
+ */
+declare const Select: React.FC<SelectProps>;
 export default Select;
-export * from './types';
+export type { SelectProps, SelectOption, TagRenderProps };

package/dist/types/components/Select/styles.d.ts

@@ -0,0 +1,45 @@
+import { SelectStyles } 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?: SelectStyles["wrapper"];
+}>> & string;
+export declare const LabelWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Selector: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $disabled: boolean;
+    $loading: boolean;
+    $size: "small" | "default" | "large";
+    $open: boolean;
+    $styles?: SelectStyles["selector"];
+}>> & string;
+export declare const SelectorContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Placeholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const SingleValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TagsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 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>, {
+    $disabled: boolean;
+    $styles?: SelectStyles["tag"];
+}>> & 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 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 SuffixArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Arrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $open: boolean;
+}>> & string;
+export declare const LoadingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & 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>, {
+    $open: boolean;
+    $styles?: SelectStyles["dropdown"];
+}>> & string;
+export declare const OptionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $maxHeight?: number;
+}>> & string;
+export declare const Option: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $selected: boolean;
+    $active: boolean;
+    $disabled: boolean;
+    $styles?: SelectStyles["option"];
+}>> & string;
+export declare const CheckIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Empty: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const injectGlobalStyles: () => void;

package/dist/types/components/Select/types.d.ts

@@ -1,41 +1,134 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * Select 选项数据类型
+ */
 export interface SelectOption {
-    value: any;
-    label: React.ReactNode;
+    /** 选项值 */
+    value: string | number;
+    /** 选项显示文本 */
+    label: string | ReactNode;
+    /** 是否禁用 */
     disabled?: boolean;
-    icon?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 自定义类名 */
+    className?: string;
 }
+/**
+ * Select 组件属性接口
+ */
 export interface SelectProps {
-    value?: any;
-    defaultValue?: any;
-    onChange?: (value: any) => void;
-    placeholder?: string;
-    disabled?: boolean;
-    size?: 'large' | 'middle' | 'small';
-    style?: React.CSSProperties;
-    className?: string;
+    /** 当前选中的值（受控模式） */
+    value?: string | number | (string | number)[];
+    /** 默认选中的值（非受控模式） */
+    defaultValue?: string | number | (string | number)[];
+    /** 选项列表 */
     options?: SelectOption[];
-    children?: React.ReactNode;
-    open?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 加载中状态 */
+    loading?: boolean;
+    /** 是否多选 */
+    mode?: 'single' | 'multiple';
+    /** 占位符文本 */
+    placeholder?: string;
+    /** 是否可搜索 */
+    searchable?: boolean;
+    /** 是否可清除 */
+    clearable?: boolean;
+    /** 组件尺寸 */
+    size?: 'small' | 'default' | 'large';
+    /** 组件宽度 */
+    width?: string | number;
+    /** 自定义样式 */
+    styles?: SelectStyles;
+    /** 外层容器样式 */
+    style?: CSSProperties;
+    /** 变化时的回调函数 */
+    onChange?: (value: string | number | (string | number)[], option?: SelectOption | SelectOption[]) => void;
+    /** 展开/收起时的回调函数 */
     onOpenChange?: (open: boolean) => void;
-    width?: number | string;
-    height?: number | string;
-    dropdownHeight?: number | string;
-    /** 标签文案，显示在选择器前面 */
-    label?: string | React.ReactNode;
-    /** 标签到选择器的距离 */
+    /** 搜索时的回调函数 */
+    onSearch?: (value: string) => void;
+    /** 自定义选项渲染 */
+    optionRender?: (option: SelectOption) => ReactNode;
+    /** 自定义选中项渲染 */
+    tagRender?: (props: TagRenderProps) => ReactNode;
+    /** 标签文案，显示在选择框前面 */
+    label?: string | ReactNode;
+    /** 标签到选择框的距离 */
     labelGap?: string | number;
     /** 标签的CSS类名 */
     labelClassName?: string;
     /** 标签的样式 */
-    labelStyle?: React.CSSProperties;
+    labelStyle?: CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+    /** 是否显示下拉箭头 */
+    showArrow?: boolean;
+    /** 下拉菜单的最大高度 */
+    maxHeight?: number;
+    /** 空状态显示内容 */
+    emptyContent?: ReactNode;
+    /** 获取弹出层容器 */
+    getPopupContainer?: () => HTMLElement;
 }
-export interface SelectOptionProps {
-    value: any;
-    children: React.ReactNode;
+/**
+ * 标签渲染属性
+ */
+export interface TagRenderProps {
+    /** 选项值 */
+    value: string | number;
+    /** 选项标签 */
+    label: string | ReactNode;
+    /** 关闭回调 */
+    onClose: (e?: React.MouseEvent) => void;
+    /** 是否禁用 */
     disabled?: boolean;
-    icon?: string;
 }
-export interface SelectOptGroupProps {
-    label: React.ReactNode;
-    children?: React.ReactNode;
+/**
+ * 样式配置接口
+ */
+export interface SelectStyles {
+    /** 外层容器样式 */
+    wrapper?: CSSProperties;
+    /** 选择器样式 */
+    selector?: CSSProperties;
+    /** 下拉菜单样式 */
+    dropdown?: CSSProperties;
+    /** 选项样式 */
+    option?: CSSProperties;
+    /** 选中标签样式（多选模式） */
+    tag?: CSSProperties;
+}
+/**
+ * 尺寸配置接口
+ */
+export interface SelectSizeConfig {
+    height: string;
+    padding: string;
+    fontSize: string;
+    tagHeight: string;
+}
+/**
+ * Select 主题配置接口
+ */
+export interface SelectThemeConfig {
+    colors: {
+        primary: string;
+        text: string;
+        textSecondary: string;
+        textDisabled: string;
+        border: string;
+        borderHover: string;
+        borderFocus: string;
+        bg: string;
+        bgHover: string;
+        bgSelected: string;
+    };
+    sizes: {
+        small: SelectSizeConfig;
+        default: SelectSizeConfig;
+        large: SelectSizeConfig;
+    };
 }

package/dist/types/components/Spin/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SpinProps, SpinSize } from './types';
+import './Spin.css';
+declare const Spin: React.FC<SpinProps>;
+export default Spin;
+export type { SpinProps, SpinSize };

package/dist/types/components/Spin/types.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode, CSSProperties } from 'react';
+export type SpinSize = 'small' | 'default' | 'large';
+export interface SpinProps {
+    /**
+     * 是否为加载状态
+     * @default true
+     */
+    spinning?: boolean;
+    /**
+     * 加载指示符
+     */
+    indicator?: ReactNode;
+    /**
+     * 当作为包裹元素时，可以自定义描述文案
+     */
+    tip?: ReactNode;
+    /**
+     * 组件大小
+     * @default 'default'
+     */
+    size?: SpinSize;
+    /**
+     * 延迟显示加载效果的时间（防止闪烁）
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 包裹的子元素
+     */
+    children?: ReactNode;
+    /**
+     * 是否全屏显示
+     * @default false
+     */
+    fullscreen?: boolean;
+}

package/dist/types/components/Splitter/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './Splitter.css';
+import { SplitterProps } from './types';
+/**
+ * Splitter 主组件 - 自由切分指定区域为多部分
+ * 支持水平和垂直分隔，可拖拽调整各区域大小，支持多面板
+ */
+export declare const Splitter: React.FC<SplitterProps>;
+export default Splitter;

package/dist/types/components/Splitter/styles.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Splitter 组件样式工具函数
+ * 使用 CSS 变量与现代化设计系统保持一致
+ */
+import { CSSProperties } from 'react';
+/**
+ * 获取容器样式
+ */
+export declare const getContainerStyle: (layout: "horizontal" | "vertical", customStyle?: CSSProperties) => CSSProperties;
+/**
+ * 获取面板样式
+ * @param size - 面板尺寸（像素）
+ * @param layout - 布局方向
+ * @param index - 面板索引
+ * @param totalPanels - 面板总数
+ */
+export declare const getPanelStyle: (size: number, layout: "horizontal" | "vertical", index?: number, totalPanels?: number) => CSSProperties;
+/**
+ * 获取分割条样式
+ * 使用 CSS 变量实现现代化渐变和阴影效果
+ * @param layout - 布局方向
+ * @param splitterSize - 分割条大小
+ * @param disabled - 是否禁用
+ * @param index - 分割条索引
+ */
+export declare const getSplitterBarStyle: (layout: "horizontal" | "vertical", splitterSize: number | undefined, disabled: boolean, index?: number) => CSSProperties;
+/**
+ * 获取分割线样式
+ * 支持自定义颜色和拖拽状态
+ * @param layout - 布局方向
+ * @param lineColor - 线条颜色
+ * @param lineHoverColor - 悬停颜色
+ * @param isDragging - 是否正在拖拽
+ * @param isActive - 是否激活状态（当前拖拽的分割条）
+ */
+export declare const getSplitterLineStyle: (layout: "horizontal" | "vertical", lineColor: string | undefined, lineHoverColor: string | undefined, isDragging: boolean, isActive?: boolean) => CSSProperties;
+/**
+ * 获取拖拽遮罩层样式
+ * 用于拖拽时覆盖整个页面防止事件穿透
+ */
+export declare const getDragOverlayStyle: () => CSSProperties;
+/**
+ * 解析尺寸配置为数组
+ * @param size - 尺寸配置（单值或数组）
+ * @param count - 面板数量
+ * @param defaultValue - 默认值
+ */
+export declare const parseSizeConfig: (size: number | string | (number | string)[] | undefined, count: number, defaultValue?: number | string) => (number | string)[];
+/**
+ * 解析数字配置为数组
+ * @param value - 数值配置（单值或数组）
+ * @param count - 面板数量
+ * @param defaultValue - 默认值
+ */
+export declare const parseNumberConfig: (value: number | number[] | undefined, count: number, defaultValue: number) => number[];
+/**
+ * 将尺寸值转换为像素
+ * @param size - 尺寸值（数字或百分比字符串）
+ * @param availableSpace - 可用空间
+ */
+export declare const parseSizeToPixels: (size: number | string, availableSpace: number) => number;

package/dist/types/components/Splitter/types.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Splitter 组件类型定义
+ * 用于自由切分指定区域，支持水平和垂直分隔，支持多面板
+ */
+import React from 'react';
+/**
+ * 单个面板配置
+ */
+export interface SplitterPanel {
+    /** 面板内容 */
+    content: React.ReactNode;
+    /** 面板默认大小（像素或百分比） */
+    defaultSize?: number | string;
+    /** 面板最小尺寸 */
+    minSize?: number;
+    /** 面板最大尺寸 */
+    maxSize?: number;
+    /** 是否禁用该面板相邻的分割条拖拽 */
+    disabled?: boolean;
+}
+/**
+ * Splitter 组件 Props
+ */
+export interface SplitterProps {
+    /** 布局方向 */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * 面板数组，支持多面板配置
+     * 当提供 panels 时，优先使用 panels，忽略 left/right/top/bottom/children
+     */
+    panels?: SplitterPanel[];
+    /**
+     * 默认大小配置（像素或百分比）
+     * 可以是单个值（用于2面板模式）或数组（用于多面板模式）
+     * 默认为 '50%' 或 ['33%', '33%', '33%']
+     */
+    defaultSize?: number | string | (number | string)[];
+    /**
+     * 最小尺寸配置
+     * 可以是单个值或数组
+     */
+    minSize?: number | number[];
+    /**
+     * 最大尺寸配置
+     * 可以是单个值或数组
+     */
+    maxSize?: number | number[];
+    /** 分割条大小（像素），默认为 10 */
+    splitterSize?: number;
+    /** 拖拽线颜色 */
+    lineColor?: string;
+    /** 拖拽线悬停/拖拽时的颜色 */
+    lineHoverColor?: string;
+    /** 是否禁用所有拖拽 */
+    disabled?: boolean;
+    /**
+     * 拖拽时的回调
+     * @param sizes - 所有面板的当前尺寸数组
+     * @param index - 正在拖拽的分割条索引
+     */
+    onResize?: (sizes: number[], index: number) => void;
+    /**
+     * 拖拽结束后的回调
+     * @param sizes - 所有面板的最终尺寸数组
+     */
+    onResizeEnd?: (sizes: number[]) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** @deprecated 请使用 panels 或 children */
+    left?: React.ReactNode;
+    /** @deprecated 请使用 panels 或 children */
+    right?: React.ReactNode;
+    /** @deprecated 请使用 panels 或 children */
+    top?: React.ReactNode;
+    /** @deprecated 请使用 panels 或 children */
+    bottom?: React.ReactNode;
+    /**
+     * 子元素数组
+     * 用于2面板模式时传入 [面板1, 面板2]
+     * 用于多面板模式时传入任意数量的面板
+     */
+    children?: React.ReactNode[];
+}
+/**
+ * 单个拖拽状态
+ */
+export interface DragState {
+    /** 是否正在拖拽 */
+    isDragging: boolean;
+    /** 拖拽开始时的鼠标/触摸位置 */
+    startPosition: number;
+    /** 拖拽开始时的各面板尺寸 */
+    startSizes: number[];
+    /** 容器尺寸 */
+    containerSize: number;
+    /** 正在拖拽的分割条索引 */
+    splitterIndex: number;
+}
+/**
+ * 面板尺寸信息
+ */
+export interface PanelSizeInfo {
+    /** 面板索引 */
+    index: number;
+    /** 面板当前尺寸 */
+    size: number;
+    /** 面板最小尺寸 */
+    minSize: number;
+    /** 面板最大尺寸 */
+    maxSize: number;
+    /** 默认尺寸 */
+    defaultSize: number | string;
+}

package/dist/types/components/TimePicker/RangePicker.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimeRangePickerProps } from './types';
+declare const RangePicker: React.FC<TimeRangePickerProps>;
+export default RangePicker;

package/dist/types/components/TimePicker/TimePickerPanel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimePickerPanelProps } from './types';
+declare const TimePickerPanel: React.FC<TimePickerPanelProps>;
+export default TimePickerPanel;

package/dist/types/components/TimePicker/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './TimePicker.css';
+import { TimePickerProps } from './types';
+import RangePicker from './RangePicker';
+declare const TimePicker: React.FC<TimePickerProps> & {
+    RangePicker: typeof RangePicker;
+};
+export default TimePicker;
+export type { TimePickerProps };
+export { RangePicker };

package/dist/types/components/TimePicker/styles.d.ts

@@ -0,0 +1,33 @@
+export declare const TimePickerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    width?: string | number;
+}>> & string;
+export declare const TimePickerTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    focused?: boolean;
+    disabled?: boolean;
+}>> & string;
+export declare const TimePickerValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    isPlaceholder?: boolean;
+    disabled?: boolean;
+}>> & string;
+export declare const TimePickerSuffix: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TimePickerClear: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    visible?: boolean;
+}>> & string;
+export declare const TimePickerIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    open?: boolean;
+}>> & string;
+export declare const TimePickerDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    top: number;
+    left: number;
+    minWidth: number;
+}>> & string;
+export declare const TimePickerPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TimeColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TimeColumnHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TimeColumnList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TimeOption: 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;
+}>> & string;
+export declare const TimePickerLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TimePickerWithLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;