cx-chat 0.0.2 → 0.0.4

package/src/components/cx-ui/multi-select/index2.tsx

@@ -1,361 +0,0 @@
-import React, {
-    useCallback,
-    useEffect,
-    useLayoutEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { ChevronDown, Check, Search } from 'lucide-react';
-import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
-
-export interface MultiSelectOption {
-    label: string;
-    value: string;
-}
-
-interface MultiSelectProps {
-    options: MultiSelectOption[];
-    value: string[];
-    onChange: (value: string[]) => void;
-    placeholder?: string;
-    label?: string;
-    className?: string;
-    /**
-     * 在 antd Modal / Drawer 等容器里，为避免下拉被 overflow 裁剪，建议保持默认 true
-     */
-    portal?: boolean;
-}
-
-const CxMultiSelect: React.FC<MultiSelectProps> = ({
-    options,
-    value,
-    onChange,
-    placeholder = 'Select options',
-    label,
-    className,
-    portal = true,
-}) => {
-    const { t } = useTranslation();
-    const [isOpen, setIsOpen] = useState(false);
-    const [searchTerm, setSearchTerm] = useState('');
-    const containerRef = useRef<HTMLDivElement>(null);
-    const triggerRef = useRef<HTMLDivElement>(null);
-    const dropdownRef = useRef<HTMLDivElement>(null);
-    const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({});
-    const raf1Ref = useRef<number | null>(null);
-    const raf2Ref = useRef<number | null>(null);
-
-    // Close on click outside
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            const targetNode = event.target as Node;
-            const clickedInContainer =
-                containerRef.current && containerRef.current.contains(targetNode);
-            const clickedInDropdown =
-                dropdownRef.current && dropdownRef.current.contains(targetNode);
-
-            if (!clickedInContainer && !clickedInDropdown) {
-                setIsOpen(false);
-            }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, []);
-
-    const filteredOptions = useMemo(
-        () =>
-            options.filter(option =>
-                option.label.toLowerCase().includes(searchTerm.toLowerCase()),
-            ),
-        [options, searchTerm],
-    );
-
-    const updateDropdownPosition = useCallback(() => {
-        if (!portal) return;
-        const el = triggerRef.current;
-        if (!el) return;
-        const rect = el.getBoundingClientRect();
-        setDropdownStyle({
-            position: 'fixed',
-            left: rect.left,
-            top: rect.bottom + 4,
-            width: rect.width,
-            zIndex: 2000, // 高于 antd Modal 内容层，避免被遮挡
-        });
-    }, [portal]);
-
-    const scheduleUpdatePosition = useCallback(() => {
-        if (!portal) return;
-        if (raf1Ref.current != null) cancelAnimationFrame(raf1Ref.current);
-        if (raf2Ref.current != null) cancelAnimationFrame(raf2Ref.current);
-
-        // 双帧：第一帧拿到本次 commit 后的位置，第二帧等布局/滚动条/动画更稳定
-        raf1Ref.current = requestAnimationFrame(() => {
-            updateDropdownPosition();
-            raf2Ref.current = requestAnimationFrame(() => {
-                updateDropdownPosition();
-            });
-        });
-    }, [portal, updateDropdownPosition]);
-
-    // 组件卸载时清理 raf，避免 setState 警告
-    useEffect(() => {
-        return () => {
-            if (raf1Ref.current != null) cancelAnimationFrame(raf1Ref.current);
-            if (raf2Ref.current != null) cancelAnimationFrame(raf2Ref.current);
-        };
-    }, []);
-
-    const toggleOption = (optionValue: string) => {
-        const newValue = value.includes(optionValue)
-            ? value.filter(v => v !== optionValue)
-            : [...value, optionValue];
-        onChange(newValue);
-        scheduleUpdatePosition();
-    };
-
-    const handleSelectAll = () => {
-        if (value.length === filteredOptions.length) {
-            // Deselect all visible
-            const visibleValues = filteredOptions.map(o => o.value);
-            onChange(value.filter(v => !visibleValues.includes(v)));
-        } else {
-            // Select all visible
-            const visibleValues = filteredOptions.map(o => o.value);
-            const newValue = [...new Set([...value, ...visibleValues])];
-            onChange(newValue);
-        }
-        scheduleUpdatePosition();
-    };
-
-    useEffect(() => {
-        if (!isOpen) return;
-        updateDropdownPosition();
-
-        const handleScrollOrResize = () => updateDropdownPosition();
-        window.addEventListener('resize', handleScrollOrResize);
-        // 捕获阶段监听滚动，兼容 modal body 内部滚动容器
-        window.addEventListener('scroll', handleScrollOrResize, true);
-        return () => {
-            window.removeEventListener('resize', handleScrollOrResize);
-            window.removeEventListener('scroll', handleScrollOrResize, true);
-        };
-    }, [isOpen, updateDropdownPosition]);
-
-    // 当选择/搜索导致表单布局变化时（比如 antd 校验提示出现/消失），需要同步更新位置
-    useLayoutEffect(() => {
-        if (!isOpen) return;
-        if (!portal) return;
-        scheduleUpdatePosition();
-    }, [isOpen, portal, updateDropdownPosition, searchTerm, value, filteredOptions]);
-
-    // 监听触发器尺寸变化（antd Form 的 help/extra 出现可能导致触发器位置变化）
-    useEffect(() => {
-        if (!isOpen) return;
-        if (!portal) return;
-        if (typeof ResizeObserver === 'undefined') return;
-        const el = triggerRef.current;
-        if (!el) return;
-
-        const ro = new ResizeObserver(() => {
-            scheduleUpdatePosition();
-        });
-        ro.observe(el);
-        return () => ro.disconnect();
-    }, [isOpen, portal, updateDropdownPosition]);
-
-    // 监听 body 尺寸变化（Modal 打开/关闭、滚动条出现/消失会影响 left/top）
-    useEffect(() => {
-        if (!isOpen) return;
-        if (!portal) return;
-        if (typeof ResizeObserver === 'undefined') return;
-        if (typeof document === 'undefined') return;
-        const ro = new ResizeObserver(() => {
-            scheduleUpdatePosition();
-        });
-        ro.observe(document.body);
-        return () => ro.disconnect();
-    }, [isOpen, portal, scheduleUpdatePosition]);
-
-    const renderTrigger = () => {
-        if (value.length === 0) {
-            return <span className="text-gray-500 dark:text-gray-400">{placeholder}</span>;
-        }
-
-        // Show summary: "Role (Selected 2)" or "角色 (已选2项)"
-        return (
-            <span className="text-gray-900 dark:text-white truncate">
-                {placeholder} <span className="text-blue-600 dark:text-blue-400">({t('common.selected_count', { count: value.length, defaultValue: `${value.length} selected` })})</span>
-            </span>
-        );
-    };
-
-    return (
-        <div className={clsx("relative", className)} ref={containerRef}>
-            {label && (
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    {label}
-                </label>
-            )}
-
-            {/* Trigger Button */}
-            <div
-                ref={triggerRef}
-                onClick={() => setIsOpen(!isOpen)}
-                className={clsx(
-                    "w-full h-10 px-3 bg-gray-50 dark:bg-gray-900 border rounded-lg cursor-pointer flex items-center justify-between transition-colors text-sm",
-                    isOpen ? "border-blue-500 ring-2 ring-blue-500/20" : "border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
-                )}
-            >
-                <div className="flex-1 overflow-hidden">
-                    {renderTrigger()}
-                </div>
-                <ChevronDown size={16} className={clsx("text-gray-400 transition-transform ml-2", isOpen && "transform rotate-180")} />
-            </div>
-
-            {/* Dropdown Menu */}
-            {isOpen && !portal && (
-                <div
-                    ref={dropdownRef}
-                    className="absolute z-50 w-full mt-1 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-80 flex flex-col"
-                >
-                    {/* Search */}
-                    <div className="p-2 border-b border-gray-200 dark:border-gray-700">
-                        <div className="relative">
-                            <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
-                            <input
-                                type="text"
-                                value={searchTerm}
-                                onChange={e => setSearchTerm(e.target.value)}
-                                placeholder={t('common.search', { defaultValue: 'Search...' })}
-                                className="w-full pl-9 pr-3 py-1.5 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 dark:text-white"
-                                onClick={e => e.stopPropagation()}
-                            />
-                        </div>
-                    </div>
-
-                    {/* Options List */}
-                    <div className="overflow-y-auto flex-1 p-1">
-                        {filteredOptions.length > 0 && (
-                            <div
-                                onClick={handleSelectAll}
-                                className="px-3 py-2 text-sm text-blue-600 dark:text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md cursor-pointer font-medium mb-1"
-                            >
-                                {value.length === filteredOptions.length ? t('common.unselect_all') : t('common.select_all')}
-                            </div>
-                        )}
-
-                        {filteredOptions.length === 0 ? (
-                            <div className="px-3 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
-                                {t('common.no_results', { defaultValue: 'No results found' })}
-                            </div>
-                        ) : (
-                            filteredOptions.map(option => {
-                                const isSelected = value.includes(option.value);
-                                return (
-                                    <div
-                                        key={option.value}
-                                        onClick={() => toggleOption(option.value)}
-                                        className={clsx(
-                                            "flex items-center px-3 py-2 text-sm rounded-md cursor-pointer transition-colors",
-                                            isSelected
-                                                ? "bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300"
-                                                : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800"
-                                        )}
-                                    >
-                                        <div className={clsx(
-                                            "w-4 h-4 rounded border flex items-center justify-center mr-3 transition-colors",
-                                            isSelected
-                                                ? "bg-blue-600 border-blue-600"
-                                                : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
-                                        )}>
-                                            {isSelected && <Check size={10} className="text-white" />}
-                                        </div>
-                                        {option.label}
-                                    </div>
-                                );
-                            })
-                        )}
-                    </div>
-                </div>
-            )}
-
-            {isOpen && portal && typeof document !== 'undefined' &&
-                createPortal(
-                    <div
-                        ref={dropdownRef}
-                        style={dropdownStyle}
-                        className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-80 flex flex-col"
-                        onMouseDown={e => e.stopPropagation()}
-                        onClick={e => e.stopPropagation()}
-                    >
-                        {/* Search */}
-                        <div className="p-2 border-b border-gray-200 dark:border-gray-700">
-                            <div className="relative">
-                                <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
-                                <input
-                                    type="text"
-                                    value={searchTerm}
-                                    onChange={e => setSearchTerm(e.target.value)}
-                                    placeholder={t('common.search', { defaultValue: 'Search...' })}
-                                    className="w-full pl-9 pr-3 py-1.5 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 dark:text-white"
-                                    onClick={e => e.stopPropagation()}
-                                />
-                            </div>
-                        </div>
-
-                        {/* Options List */}
-                        <div className="overflow-y-auto flex-1 p-1">
-                            {filteredOptions.length > 0 && (
-                                <div
-                                    onClick={handleSelectAll}
-                                    className="px-3 py-2 text-sm text-blue-600 dark:text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md cursor-pointer font-medium mb-1"
-                                >
-                                    {value.length === filteredOptions.length ? t('common.unselect_all') : t('common.select_all')}
-                                </div>
-                            )}
-
-                            {filteredOptions.length === 0 ? (
-                                <div className="px-3 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
-                                    {t('common.no_results', { defaultValue: 'No results found' })}
-                                </div>
-                            ) : (
-                                filteredOptions.map(option => {
-                                    const isSelected = value.includes(option.value);
-                                    return (
-                                        <div
-                                            key={option.value}
-                                            onClick={() => toggleOption(option.value)}
-                                            className={clsx(
-                                                "flex items-center px-3 py-2 text-sm rounded-md cursor-pointer transition-colors",
-                                                isSelected
-                                                    ? "bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300"
-                                                    : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800"
-                                            )}
-                                        >
-                                            <div className={clsx(
-                                                "w-4 h-4 rounded border flex items-center justify-center mr-3 transition-colors",
-                                                isSelected
-                                                    ? "bg-blue-600 border-blue-600"
-                                                    : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
-                                            )}>
-                                                {isSelected && <Check size={10} className="text-white" />}
-                                            </div>
-                                            {option.label}
-                                        </div>
-                                    );
-                                })
-                            )}
-                        </div>
-                    </div>,
-                    document.body,
-                )}
-        </div>
-    );
-};
-
-export default CxMultiSelect;

package/src/components/cx-ui/radio/index.tsx

@@ -1,33 +0,0 @@
-import type { GetProps } from 'antd'
-import { Radio } from 'antd'
-import React from 'react'
-
-type AntRadioGroupProps = GetProps<typeof Radio.Group>
-type AntRadioProps = GetProps<typeof Radio>
-
-export type CxRadioOption = {
-  label: React.ReactNode
-  value: any
-  disabled?: boolean
-}
-
-export type CxRadioProps = Omit<AntRadioGroupProps, 'options'> & {
-  options: CxRadioOption[]
-}
-
-/** 单选按钮组：基于 antd Radio.Group，统一 options 的写法。 */
-const CxRadioGroup: React.FC<CxRadioProps> = ({ options, ...rest }) => {
-  return <Radio.Group {...rest} options={options as any} />
-}
-
-/** 单个单选按钮：基于 antd Radio。 */
-const CxRadioPrimitive: React.FC<AntRadioProps> = (props) => {
-  return <Radio {...props} />
-}
-
-const CxRadio = Object.assign(CxRadioPrimitive, {
-  Group: CxRadioGroup,
-})
-
-export default CxRadio
-

package/src/components/cx-ui/range-picker/index.less

@@ -1,65 +0,0 @@
-.cx-range-picker {
-  border-radius: 8px;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-
-  &.cx-range-picker--cxForm {
-    min-height: 42px;
-    height: 42px;
-  }
-
-  &.cx-range-picker--cxSearch {
-    min-height: 40px;
-    height: 40px;
-  }
-
-  .ant-picker-input > input {
-    font-size: inherit;
-  }
-  /**
-   * Range 分隔符：保持在正常布局流里，并固定占位宽度。
-   * 这样「空值隐藏」与「focus/有值显示」之间不会发生宽度回跳，也不会与 placeholder 叠加。
-   */
-  .ant-picker-range-separator {
-    width: 24px;
-    min-width: 24px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /**
-   * 固定两侧输入框占比，避免 placeholder 文案切换导致宽度跳动：
-   * - 空值态 RangePicker placeholder 可能是 ['', '']（浮动标签）
-   * - focus 态会显示真实 placeholder（文案更长）
-   */
-  .ant-picker-input {
-    flex: 1 1 0;
-    min-width: 0;
-  }
-}
-
-/**
- * 日期时间范围：无值且未聚焦/未展开面板时，默认不展示分隔符；
- * 有值或聚焦/展开时恢复展示，避免空态下出现突兀的“~ / -”。
- */
-.cx-range-picker.cx-range-picker--noValue:not(.ant-picker-focused):not(.cx-range-picker--panelOpen) {
-  .ant-picker-range-separator {
-    opacity: 0;
-    visibility: hidden;
-    width: 24px;
-    min-width: 24px;
-  }
-
-  /* 空值失焦态：仅修正右侧日历图标垂直居中（不影响分隔符/输入宽度） */
-  .ant-picker-suffix {
-    display: inline-flex;
-    align-items: center;
-    margin-top: 0;
-    margin-bottom: 0;
-    /* 只做视觉位移，不脱离文档流，避免 focus 前后宽度跳动 */
-    transform: translateY(-6px);
-  }
-}
-

package/src/components/cx-ui/range-picker/index.tsx

@@ -1,219 +0,0 @@
-import type { GetProps } from 'antd'
-import { ConfigProvider, DatePicker } from 'antd'
-import zhCN from 'antd/locale/zh_CN'
-import enUS from 'antd/locale/en_US'
-import clsx from 'clsx'
-import dayjs from 'dayjs'
-import 'dayjs/locale/zh-cn'
-import 'dayjs/locale/en'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-
-import { CxFloatingShell } from '../floating-shell/CxFloatingShell'
-import { hasCxFloatingValue } from '../floating-shell/has-floating-value'
-import './index.less'
-
-const { RangePicker } = DatePicker
-
-type AntRangePickerProps = GetProps<typeof RangePicker>
-
-const LOCALE_ENUM: Record<
-  string,
-  { antd: typeof zhCN; dayjs: string }
-> = {
-  'zh-CN': { antd: zhCN, dayjs: 'zh-cn' },
-  'en-US': { antd: enUS, dayjs: 'en' },
-  zh: { antd: zhCN, dayjs: 'zh-cn' },
-  en: { antd: enUS, dayjs: 'en' },
-}
-
-type CxRangePickerOwn = {
-  cxFloatingLabel?: React.ReactNode
-  cxFocusPlaceholder?: [string, string]
-  /** 在控件容器上监听 Enter（antd RangePicker 无此 prop） */
-  onPressEnter?: () => void
-}
-
-export type CxRangePickerProps = Omit<AntRangePickerProps, 'variant'> & CxRangePickerOwn
-
-type CxRangePickerBaseProps = Omit<AntRangePickerProps, 'variant'> & CxRangePickerOwn
-
-/** 判断浮动标签是否有效（避免 String() / Number() 这类强转）。 */
-const hasNonEmptyFloatingLabel = (label: React.ReactNode): boolean => {
-  if (label == null || label === false) return false
-  if (typeof label === 'string') return label.trim().length > 0
-  return true
-}
-
-/** 获取浮动壳聚焦占位：优先 cxFocusPlaceholder，其次仅接受 [string,string] placeholder。 */
-const resolveFocusPlaceholder = (
-  cxFocusPlaceholder: [string, string] | undefined,
-  placeholder: AntRangePickerProps['placeholder'] | undefined,
-): [string, string] | undefined => {
-  if (cxFocusPlaceholder) return cxFocusPlaceholder
-  if (Array.isArray(placeholder) && placeholder.length >= 2) {
-    const p0 = placeholder[0]
-    const p1 = placeholder[1]
-    if (typeof p0 === 'string' && typeof p1 === 'string') return [p0, p1]
-  }
-  return undefined
-}
-
-/** 解析页面语言：优先 html lang，其次回退 zh-CN。 */
-const resolveDocumentLang = (): string => {
-  if (typeof document === 'undefined') return 'zh-CN'
-  const lang = document.documentElement.lang
-  return lang ? lang : 'zh-CN'
-}
-
-/** CxRangePicker 基础组件：统一 RangePicker 与浮动标签能力。 */
-const CxRangePickerPrimitive: React.FC<CxRangePickerProps> = (props) => {
-  const {
-    className,
-    style = undefined,
-    cxFloatingLabel,
-    cxFocusPlaceholder,
-    placeholder,
-    value,
-    onOpenChange,
-    disabled,
-    onPressEnter,
-    ...rest
-  } = props
-
-  /** 解析高度：默认 42，可通过 style.height 覆盖（数值）。 */
-  const resolveHeight = () => {
-    const h = style && typeof style === 'object' ? (style as { height?: unknown }).height : undefined
-    return typeof h === 'number' ? h : 42
-  }
-
-  /** 根据高度推导浮动壳的布局类型：40 及以下按搜索区，其他按表单区。 */
-  const shellVariant: 'cxForm' | 'cxSearch' = resolveHeight() <= 40 ? 'cxSearch' : 'cxForm'
-
-  const localeLang = resolveDocumentLang()
-  const localeConfig = LOCALE_ENUM[localeLang] || LOCALE_ENUM['zh-CN']
-
-  useEffect(() => {
-    dayjs.locale(localeConfig.dayjs)
-  }, [localeConfig.dayjs])
-
-  const useFloat = hasNonEmptyFloatingLabel(cxFloatingLabel)
-  const [panelOpen, setPanelOpen] = useState(false)
-
-  const hasValue = useMemo(() => hasCxFloatingValue(value, 'range'), [value])
-  const pickerRef = useRef<any>(null)
-
-  /** 控制日期范围分隔符显示：无值且未聚焦/未打开面板时默认隐藏。 */
-  const pickerClass = clsx(
-    'cx-range-picker',
-    shellVariant === 'cxSearch' ? 'cx-range-picker--cxSearch' : 'cx-range-picker--cxForm',
-    hasValue ? 'cx-range-picker--hasValue' : 'cx-range-picker--noValue',
-    panelOpen ? 'cx-range-picker--panelOpen' : null,
-    className,
-  )
-
-  const pickerStyle: React.CSSProperties = {
-    boxSizing: 'border-box',
-    ...(style && typeof style === 'object' ? style : {}),
-    width: '100%',
-  }
-
-  const pickerEl = (
-    <RangePicker
-      {...(rest as AntRangePickerProps)}
-      disabled={disabled}
-      value={value}
-      ref={pickerRef}
-      className={pickerClass}
-      style={pickerStyle}
-      placeholder={useFloat ? ['', ''] : placeholder}
-      onOpenChange={(open) => {
-        const panel = Array.isArray(open) ? Boolean(open[0] || open[1]) : Boolean(open)
-        setPanelOpen(panel)
-        onOpenChange?.(open)
-      }}
-    />
-  )
-
-  const inner = useFloat ? (
-    <CxFloatingShell
-      disabled={disabled}
-      focusPlaceholder={resolveFocusPlaceholder(cxFocusPlaceholder, placeholder)}
-      hasValue={hasValue}
-      label={cxFloatingLabel}
-      overlayOpen={panelOpen}
-      variant={shellVariant}
-    >
-      {pickerEl}
-    </CxFloatingShell>
-  ) : (
-    pickerEl
-  )
-
-  return (
-    <ConfigProvider locale={localeConfig.antd}>
-      <div
-        className="cx-range-picker-wrap"
-        onKeyDown={(e) => {
-          if (e.key !== 'Enter') return
-          onPressEnter?.()
-        }}
-        role="presentation">
-        {inner}
-      </div>
-    </ConfigProvider>
-  )
-}
-
-/** Large：42px，高度偏表单主输入。 */
-export function CxRangePickerLarge(props: CxRangePickerBaseProps): React.ReactElement
-export function CxRangePickerLarge(props: CxRangePickerProps) {
-  return (
-    <CxRangePickerPrimitive
-      {...(props as any)}
-      style={{ ...(props as any)?.style, height: 42, minHeight: 42 }}
-    />
-  )
-}
-
-/** Medium：40px，高度偏搜索区输入。 */
-export function CxRangePickerMedium(props: CxRangePickerBaseProps): React.ReactElement
-export function CxRangePickerMedium(props: CxRangePickerProps) {
-  return (
-    <CxRangePickerPrimitive
-      {...(props as any)}
-      style={{ ...(props as any)?.style, height: 40, minHeight: 40 }}
-    />
-  )
-}
-
-/** Small：32px，更紧凑。 */
-export function CxRangePickerSmall(props: CxRangePickerBaseProps): React.ReactElement
-export function CxRangePickerSmall(props: CxRangePickerProps) {
-  return (
-    <CxRangePickerPrimitive
-      {...(props as any)}
-      style={{ ...(props as any)?.style, height: 32, minHeight: 32 }}
-    />
-  )
-}
-
-/** Float：第 4 种类型，浮动标签区间选择（使用 CxFloatingShell）。 */
-export function CxRangePickerFloat(props: CxRangePickerBaseProps): React.ReactElement
-export function CxRangePickerFloat(props: CxRangePickerBaseProps) {
-  const hasLabel = hasNonEmptyFloatingLabel((props as any)?.cxFloatingLabel)
-  return (
-    <CxRangePickerPrimitive
-      {...(props as any)}
-      cxFloatingLabel={hasLabel ? (props as any)?.cxFloatingLabel : (props as any)?.placeholder}
-    />
-  )
-}
-
-const ExportedCxRangePicker = Object.assign(CxRangePickerPrimitive, {
-  Large: CxRangePickerLarge,
-  Medium: CxRangePickerMedium,
-  Small: CxRangePickerSmall,
-  Float: CxRangePickerFloat,
-})
-
-export default ExportedCxRangePicker