cx-chat 0.0.1

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

@@ -0,0 +1,361 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,65 @@
+.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

@@ -0,0 +1,219 @@
+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