react-native-x-components 0.1.0

package/dist/XMultiSelect/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * ============================================================================
+ * XMultiSelect —— 多选组件（src/components/MultiSelect 的 X 系列重制版）
+ * ============================================================================
+ *
+ * 逻辑与老版保持一致：
+ * - 触发区展示已选标签（tag 横滑）或 placeholder
+ * - 打开弹窗时把 value 拷贝成 draft，确定才回传（取消不动原值）
+ *
+ * 组件替换：
+ * - antd Modal     -> XPullView（XTopView 宿主，底部弹层）
+ * - antd Checkbox  -> XCheckbox
+ * - antd Button    -> XButton
+ */
+import React, { type ReactNode } from 'react';
+export interface XMultiSelectProps {
+    value?: any[];
+    onChange?: (val: any[]) => void;
+    options: {
+        label: string;
+        value: any;
+        disabled?: boolean;
+    }[];
+    placeholder?: string;
+    /** 弹层标题，默认取 placeholder */
+    title?: string;
+    /** 自定义触发器 */
+    children?: ReactNode;
+}
+export declare function XMultiSelect({ value, onChange, options, placeholder, title, children }: XMultiSelectProps): React.JSX.Element;
+export default XMultiSelect;

package/dist/XMultiSelect/index.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XMultiSelect —— 多选组件（src/components/MultiSelect 的 X 系列重制版）
+ * ============================================================================
+ *
+ * 逻辑与老版保持一致：
+ * - 触发区展示已选标签（tag 横滑）或 placeholder
+ * - 打开弹窗时把 value 拷贝成 draft，确定才回传（取消不动原值）
+ *
+ * 组件替换：
+ * - antd Modal     -> XPullView（XTopView 宿主，底部弹层）
+ * - antd Checkbox  -> XCheckbox
+ * - antd Button    -> XButton
+ */
+import { useCallback, useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { XPullView } from '../XPullView';
+import { XCheckbox } from '../XCheckbox';
+import { XButton } from '../XButton';
+import { useXTheme } from '../theme';
+import { useXLocale } from '../XLocale';
+import AntDesign from '@react-native-vector-icons/ant-design';
+export function XMultiSelect({ value = [], onChange, options, placeholder, title, children }) {
+    const theme = useXTheme();
+    const { t } = useXLocale();
+    const resolvedPlaceholder = placeholder ?? t('pleaseSelect');
+    const resolvedTitle = title ?? resolvedPlaceholder;
+    const [visible, setVisible] = useState(false);
+    const [draft, setDraft] = useState([]);
+    const openModal = useCallback(() => {
+        setDraft([...value]);
+        setVisible(true);
+    }, [value]);
+    const handleCancel = useCallback(() => {
+        setVisible(false);
+    }, []);
+    const handleConfirm = useCallback(() => {
+        onChange?.(draft);
+        setVisible(false);
+    }, [draft, onChange]);
+    const handleToggle = useCallback((itemValue) => {
+        setDraft(prev => (prev.includes(itemValue) ? prev.filter(v => v !== itemValue) : [...prev, itemValue]));
+    }, []);
+    const selectedLabels = options.filter(o => value.includes(o.value)).map(o => o.label);
+    return (_jsxs(_Fragment, { children: [children ? (_jsx(Pressable, { onPress: openModal, children: children })) : (_jsxs(View, { style: styles.trigger, children: [_jsx(View, { style: styles.triggerLeft, children: selectedLabels.length > 0 ? (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.labelScrollContent, children: selectedLabels.map((label, idx) => (_jsx(Pressable, { onPress: openModal, children: _jsx(View, { style: [styles.tag, { backgroundColor: theme.colorPrimaryBg }], children: _jsx(Text, { style: [styles.tagText, { color: theme.colorPrimary }], children: label }) }) }, idx))) })) : (_jsx(Pressable, { style: styles.placeholderWrap, onPress: openModal, children: _jsx(Text, { style: [styles.placeholder, { color: theme.colorTextTertiary }], children: resolvedPlaceholder }) })) }), _jsx(Pressable, { onPress: openModal, hitSlop: 8, children: _jsx(AntDesign, { name: 'right', size: 16, color: theme.colorTextTertiary }) })] })), _jsx(XPullView, { visible: visible, onClose: handleCancel, side: 'bottom', duration: 200, children: _jsxs(View, { style: [styles.panel, { backgroundColor: theme.colorBgContainer }], children: [_jsx(View, { style: [styles.header, { borderBottomColor: theme.colorSplit }], children: _jsx(Text, { style: [styles.headerTitle, { color: theme.colorText }], children: resolvedTitle }) }), _jsx(ScrollView, { style: styles.optionList, contentContainerStyle: styles.optionListContent, children: options.map(o => (_jsxs(Pressable, { style: styles.optionItem, onPress: () => handleToggle(o.value), children: [_jsx(View, { pointerEvents: 'none', children: _jsx(XCheckbox, { checked: draft.includes(o.value), disabled: o.disabled }) }), _jsx(View, { pointerEvents: 'none', style: styles.optionLabelWrap, children: _jsx(Text, { style: [styles.optionLabel, { color: theme.colorText }], children: o.label }) })] }, String(o.value)))) }), _jsxs(View, { style: [styles.footer, { borderTopColor: theme.colorSplit }], children: [_jsx(XButton, { onPress: handleCancel, style: styles.cancelBtn, children: t('cancel') }), _jsxs(XButton, { type: 'primary', onPress: handleConfirm, style: styles.confirmBtn, children: [t('confirm'), draft.length > 0 ? `（${draft.length}）` : ''] })] })] }) })] }));
+}
+const styles = StyleSheet.create({
+    trigger: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        minHeight: 36,
+        paddingRight: 4,
+        width: '100%',
+    },
+    triggerLeft: {
+        flex: 1,
+        marginRight: 8,
+        overflow: 'hidden',
+    },
+    labelScrollContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    tag: {
+        borderRadius: 4,
+        paddingHorizontal: 8,
+        paddingVertical: 3,
+        marginRight: 6,
+    },
+    tagText: {
+        fontSize: 13,
+    },
+    placeholderWrap: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    placeholder: {
+        fontSize: 15,
+    },
+    panel: {
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+    },
+    header: {
+        paddingHorizontal: 20,
+        paddingTop: 18,
+        paddingBottom: 14,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+    },
+    headerTitle: {
+        fontSize: 17,
+        fontWeight: '600',
+    },
+    optionList: {
+        maxHeight: 380,
+    },
+    optionListContent: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+    optionItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+    },
+    optionLabelWrap: {
+        marginLeft: 10,
+        flex: 1,
+    },
+    optionLabel: {
+        fontSize: 15,
+    },
+    footer: {
+        flexDirection: 'row',
+        paddingHorizontal: 20,
+        paddingTop: 14,
+        paddingBottom: 24,
+        borderTopWidth: StyleSheet.hairlineWidth,
+    },
+    cancelBtn: {
+        flex: 1,
+        marginRight: 10,
+    },
+    confirmBtn: {
+        flex: 1,
+        marginLeft: 10,
+    },
+});
+export default XMultiSelect;

package/dist/XNumberKeyboard/index.d.ts

@@ -0,0 +1,57 @@
+/**
+ * ============================================================================
+ * XNumberKeyboard —— 数字键盘（duxui NumberKeyboard 的 XTheme 重写版）
+ * ============================================================================
+ *
+ * 【与 duxui NumberKeyboard 的关系】
+ * duxui 的 NumberKeyboard 是"纯静态键盘"（弹出靠业务配 PullView），
+ * 这里完全保留该分层：
+ *   - XNumberKeyboard：纯键盘 UI（3×4 布局、乱序 random、退格、小数点）；
+ *   - XNumberKeyboardPopup：弹出模式（XPullView 底部拉起 + 取消/确定工具栏
+ *     + 草稿管理），与 XCalendarPopup/XPickerDate 交互一致，开箱即用。
+ *
+ * 【键盘布局】
+ *   1 2 3        1 2 3
+ *   4 5 6        4 5 6
+ *   7 8 9        7 8 9
+ *   . 0 ⌫   或   0(占两格)  ⌫     ← extraKey={null} 收起小数点
+ * random 打乱 1~9（duxui 同款防窥）。
+ * ============================================================================
+ */
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface XNumberKeyboardProps {
+    /** 按下数字/小数点/自定义键 */
+    onKeyPress?: (key: string) => void;
+    /** 按下退格 */
+    onBackspace?: () => void;
+    /** 乱序键盘（防窥），默认 false */
+    random?: boolean;
+    /**
+     * 左下角附加键：默认 '.'（小数点）；传 null 收起（0 占两格）；
+     * 传自定义字符串（如 '-'）即渲染自定义键。
+     */
+    extraKey?: string | null;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function XNumberKeyboard({ onKeyPress, onBackspace, random, extraKey, style }: XNumberKeyboardProps): React.JSX.Element;
+export interface XNumberKeyboardPopupProps {
+    visible: boolean;
+    onClose: () => void;
+    /** 点确定：回传草稿值 */
+    onConfirm?: (value: string) => void;
+    /** 受控值（每次打开同步进草稿） */
+    value?: string;
+    /** 草稿变化（可选，实时上抛） */
+    onChange?: (value: string) => void;
+    /** 最大长度，默认不限制 */
+    maxLength?: number;
+    /** 面板标题 */
+    title?: string;
+    /** 透传键盘 props */
+    random?: boolean;
+    extraKey?: string | null;
+    duration?: number;
+}
+export declare function XNumberKeyboardPopup({ visible, onClose, onConfirm, value, onChange, maxLength, title, random, extraKey, duration, }: XNumberKeyboardPopupProps): React.JSX.Element;
+export default XNumberKeyboard;

package/dist/XNumberKeyboard/index.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XNumberKeyboard —— 数字键盘（duxui NumberKeyboard 的 XTheme 重写版）
+ * ============================================================================
+ *
+ * 【与 duxui NumberKeyboard 的关系】
+ * duxui 的 NumberKeyboard 是"纯静态键盘"（弹出靠业务配 PullView），
+ * 这里完全保留该分层：
+ *   - XNumberKeyboard：纯键盘 UI（3×4 布局、乱序 random、退格、小数点）；
+ *   - XNumberKeyboardPopup：弹出模式（XPullView 底部拉起 + 取消/确定工具栏
+ *     + 草稿管理），与 XCalendarPopup/XPickerDate 交互一致，开箱即用。
+ *
+ * 【键盘布局】
+ *   1 2 3        1 2 3
+ *   4 5 6        4 5 6
+ *   7 8 9        7 8 9
+ *   . 0 ⌫   或   0(占两格)  ⌫     ← extraKey={null} 收起小数点
+ * random 打乱 1~9（duxui 同款防窥）。
+ * ============================================================================
+ */
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { XPullView } from '../XPullView';
+import { useXTheme } from '../theme';
+import { useXLocale } from '../XLocale';
+/** Fisher–Yates 洗牌 */
+function shuffle(list) {
+    const arr = [...list];
+    for (let i = arr.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+    return arr;
+}
+export function XNumberKeyboard({ onKeyPress, onBackspace, random = false, extraKey = '.', style }) {
+    const t = useXTheme();
+    /** 数字键序（random 时打乱一次，组件实例内稳定） */
+    const digits = useMemo(() => {
+        const base = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+        return random ? shuffle(base) : base;
+    }, [random]);
+    /** 单个键渲染 */
+    const renderKey = (label, onPress, flex = 1) => (_jsx(Pressable, { onPress: onPress, style: ({ pressed }) => [
+            styles.key,
+            { flex, backgroundColor: pressed ? t.colorBgLayout : t.colorBgContainer, borderRadius: t.borderRadius },
+        ], children: _jsx(Text, { style: [styles.keyText, { color: t.colorText }], allowFontScaling: false, children: label }) }, label));
+    return (_jsxs(View, { style: [styles.keyboard, { backgroundColor: t.colorBgLayout }, style], children: [[0, 1, 2].map(row => (_jsx(View, { style: styles.row, children: digits.slice(row * 3, row * 3 + 3).map(d => renderKey(d, () => onKeyPress?.(d))) }, row))), _jsxs(View, { style: styles.row, children: [extraKey != null
+                        ? renderKey(extraKey, () => onKeyPress?.(extraKey))
+                        : renderKey('0', () => onKeyPress?.('0'), 2.15), extraKey != null && renderKey('0', () => onKeyPress?.('0')), renderKey('⌫', () => onBackspace?.())] })] }));
+}
+export function XNumberKeyboardPopup({ visible, onClose, onConfirm, value, onChange, maxLength, title, random, extraKey = '.', duration = 200, }) {
+    const t = useXTheme();
+    const { t: i18n } = useXLocale();
+    const [draft, setDraft] = useState('');
+    const prevVisibleRef = useRef(visible);
+    /** 打开瞬间同步草稿（XPickerDate/XCalendarPopup 同套路） */
+    if (visible !== prevVisibleRef.current) {
+        prevVisibleRef.current = visible;
+        if (visible)
+            setDraft(value ?? '');
+    }
+    /** 按键 → 追加（小数点只允许一次；maxLength 截断） */
+    const handleKey = useCallback((key) => {
+        setDraft(prev => {
+            let next = prev;
+            if (key === '.') {
+                if (prev.includes('.') || prev.length === 0)
+                    return prev; // 空串不允许以 . 开头
+                next = prev + '.';
+            }
+            else {
+                if (maxLength && prev.length >= maxLength)
+                    return prev;
+                next = prev + key;
+            }
+            onChange?.(next);
+            return next;
+        });
+    }, [maxLength, onChange]);
+    /** 退格 */
+    const handleBackspace = useCallback(() => {
+        setDraft(prev => {
+            const next = prev.slice(0, -1);
+            onChange?.(next);
+            return next;
+        });
+    }, [onChange]);
+    /** 确定 */
+    const handleConfirm = useCallback(() => {
+        onConfirm?.(draft);
+        onClose();
+    }, [draft, onConfirm, onClose]);
+    return (_jsx(XPullView, { visible: visible, onClose: onClose, side: 'bottom', duration: duration, overlayOpacity: 0.4, children: _jsxs(View, { style: [styles.panel, { backgroundColor: t.colorBgContainer, paddingBottom: 10 }], children: [_jsxs(View, { style: [styles.toolbar, { borderBottomColor: t.colorSplit }], children: [_jsx(Pressable, { onPress: onClose, hitSlop: 8, children: _jsx(Text, { style: [styles.cancelBtn, { color: t.colorTextSecondary }], children: i18n('cancel') }) }), _jsx(Text, { style: [styles.title, { color: t.colorText }], numberOfLines: 1, allowFontScaling: false, children: title ?? draft }), _jsx(Pressable, { onPress: handleConfirm, hitSlop: 8, children: _jsx(Text, { style: [styles.confirmBtn, { color: t.colorPrimary }], children: i18n('confirm') }) })] }), _jsx(XNumberKeyboard, { onKeyPress: handleKey, onBackspace: handleBackspace, random: random, extraKey: extraKey })] }) }));
+}
+const styles = StyleSheet.create({
+    keyboard: {
+        padding: 8,
+        gap: 8,
+    },
+    row: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    key: {
+        height: 46,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    keyText: {
+        fontSize: 20,
+        fontWeight: '500',
+    },
+    panel: {
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+        overflow: 'hidden',
+    },
+    toolbar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        height: 48,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+    },
+    cancelBtn: {
+        fontSize: 15,
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '600',
+        flex: 1,
+        textAlign: 'center',
+        marginHorizontal: 8,
+    },
+    confirmBtn: {
+        fontSize: 15,
+        fontWeight: '600',
+    },
+});
+export default XNumberKeyboard;

package/dist/XPicker/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * ============================================================================
+ * XPicker —— 底部单列滚轮选择器（与 XPickerDate 同一滚轮形式与交互）
+ * ============================================================================
+ *
+ * 【交互逻辑与 XPickerDate 完全一致】
+ *   1. 打开时把当前 value 复制到 draft（草稿）；
+ *   2. 拖拽滚轮/点某一行只改 draft，不立即生效；
+ *   3. 点"确定"先 flush 滚轮（按当前视觉位置结算），回传 onChange 后关闭。
+ * 取消时不会误改数据。区别仅在数据形态：单列任意选项（label/value），
+ * 没有年月日联动，直接使用通用 XWheel 组件。
+ *
+ * 【结构】
+ *   XPullView（底部滑入 200ms）
+ *   └── 面板：工具栏（取消 | 标题 | 确定）+ 单列滚轮（240 高，antd 同款遮罩）
+ * ============================================================================
+ */
+import React from 'react';
+/** 选项：label 显示文本，value 回传值 */
+export interface XPickerOption<T = any> {
+    label: string;
+    value: T;
+}
+export interface XPickerProps<T = any> {
+    visible: boolean;
+    onClose: () => void;
+    options: XPickerOption<T>[];
+    /** 当前选中值（受控） */
+    value?: T;
+    /** 点确定回调：value 为选中的值，option 为对应的选项对象 */
+    onChange?: (value: T, option?: XPickerOption<T>) => void;
+    title?: string;
+    duration?: number;
+}
+export declare function XPicker<T = any>({ visible, onClose, options, value, onChange, title, duration }: XPickerProps<T>): React.JSX.Element;

package/dist/XPicker/index.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XPicker —— 底部单列滚轮选择器（与 XPickerDate 同一滚轮形式与交互）
+ * ============================================================================
+ *
+ * 【交互逻辑与 XPickerDate 完全一致】
+ *   1. 打开时把当前 value 复制到 draft（草稿）；
+ *   2. 拖拽滚轮/点某一行只改 draft，不立即生效；
+ *   3. 点"确定"先 flush 滚轮（按当前视觉位置结算），回传 onChange 后关闭。
+ * 取消时不会误改数据。区别仅在数据形态：单列任意选项（label/value），
+ * 没有年月日联动，直接使用通用 XWheel 组件。
+ *
+ * 【结构】
+ *   XPullView（底部滑入 200ms）
+ *   └── 面板：工具栏（取消 | 标题 | 确定）+ 单列滚轮（240 高，antd 同款遮罩）
+ * ============================================================================
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, View, Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { XPullView } from '../XPullView';
+import { XWheel } from '../XWheel';
+import { useXTheme } from '../theme';
+import { useXLocale } from '../XLocale';
+export function XPicker({ visible, onClose, options, value, onChange, title, duration = 200 }) {
+    const t = useXTheme();
+    const { t: i18n } = useXLocale();
+    const resolvedTitle = title ?? i18n('pleaseSelect');
+    const insets = useSafeAreaInsets();
+    const styles = useMemo(() => StyleSheet.create({
+        panel: {
+            backgroundColor: t.colorBgContainer,
+            borderTopLeftRadius: 12,
+            borderTopRightRadius: 12,
+            overflow: 'hidden',
+        },
+        toolbar: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: 16,
+            height: 48,
+            borderBottomWidth: StyleSheet.hairlineWidth,
+            borderBottomColor: t.colorSplit,
+        },
+        cancelBtn: {
+            fontSize: 15,
+        },
+        title: {
+            fontSize: 16,
+            fontWeight: '600',
+            flex: 1,
+            textAlign: 'center',
+            marginHorizontal: 8,
+        },
+        confirmBtn: {
+            fontSize: 15,
+            fontWeight: '600',
+        },
+        /** 单列占满整行（XWheel 自带 flex:1 与 240 高） */
+        columns: {
+            flexDirection: 'row',
+        },
+    }), [t]);
+    /** draft：弹窗内的临时选中值，确定时才回传 */
+    const [draft, setDraft] = useState(value);
+    /** 上一次的 visible，用于识别"本次渲染刚被打开"（与 XPickerDate 同款） */
+    const prevVisibleRef = useRef(visible);
+    /** 滚轮的 flush 句柄：确定时强制按当前视觉位置结算 */
+    const wheelRef = useRef(null);
+    /**
+     * 打开瞬间同步重置草稿为当前 value（渲染期修正派生状态，避免闪旧值）。
+     */
+    if (visible !== prevVisibleRef.current) {
+        prevVisibleRef.current = visible;
+        if (visible) {
+            setDraft(value);
+        }
+    }
+    /** 打开期间外部 value 变化（比如上层异步回填）也跟着同步 */
+    useEffect(() => {
+        if (visible) {
+            setDraft(value);
+        }
+    }, [visible, value]);
+    /** 点确定：flush 滚轮拿到"看到的"选项，回传后关闭 */
+    const handleConfirm = useCallback(() => {
+        const option = wheelRef.current?.flush() ?? options.find(o => o.value === draft);
+        if (option) {
+            onChange?.(option.value, option);
+        }
+        onClose();
+    }, [options, draft, onChange, onClose]);
+    return (_jsx(XPullView, { visible: visible, onClose: onClose, side: 'bottom', duration: duration, overlayOpacity: 0.4, children: _jsxs(View, { style: [styles.panel, { paddingBottom: Math.max(insets.bottom, 10) }], children: [_jsxs(View, { style: styles.toolbar, children: [_jsx(Pressable, { onPress: onClose, hitSlop: 8, children: _jsx(Text, { style: [styles.cancelBtn, { color: t.colorTextSecondary }], children: i18n('cancel') }) }), _jsx(Text, { style: [styles.title, { color: t.colorText }], numberOfLines: 1, children: resolvedTitle }), _jsx(Pressable, { onPress: handleConfirm, hitSlop: 8, children: _jsx(Text, { style: [styles.confirmBtn, { color: t.colorPrimary }], children: i18n('confirm') }) })] }), _jsx(View, { style: styles.columns, children: _jsx(XWheel, { ref: wheelRef, items: options, value: draft, onSelect: v => setDraft(v) }) })] }) }));
+}

package/dist/XPickerDate/index.d.ts

@@ -0,0 +1,58 @@
+/**
+ * ============================================================================
+ * XPickerDate -- 日期时间滚轮选择器（antd-mobile DatePicker 架构移植）
+ * ============================================================================
+ *
+ * 【format 决定列】出现哪些单位 token 就显示哪些列，顺序固定为
+ *   年 → 月 → 日 → 时 → 分 → 秒
+ * （与 antd-mobile precision 模型一致：antd 用 precision 指定末列，
+ *  format 是它的超集 -- antd 只能选"到某单位为止的前缀"，format 可以
+ *  任意组合，如 'YYYY-MM' 或 'HH:mm'）。
+ *
+ *   format='YYYY-MM-DD'          年 | 月 | 日（默认）
+ *   format='YYYY-MM-DD HH:mm:ss' 年 | 月 | 日 | 时 | 分 | 秒
+ *   format='HH:mm:ss'            时 | 分 | 秒
+ *   format='YYYY-MM'             年 | 月
+ *
+ * 输入解析与输出格式化都使用同一个 format：
+ *   value 传入组件输出过的同格式字符串可精确回读（dayjs customParseFormat），
+ *   传 Date 直接取各字段，解析失败取当前时间。
+ *
+ * 【对标 antd-mobile DatePicker 的逐条核对结论】
+ * 1. 列顺序/子集模型（precision）          -> format 超集实现        ✅
+ * 2. 时/分/秒两位补零，年/月/日不补
+ *    （antd 默认 renderLabel: ('0'+n).slice(-2)）                    ✅
+ * 3. 日列随年月联动（antd getMonthDays）    -> dayjs daysInMonth      ✅
+ * 4. 滚轮手势/弹簧/橡皮筋/松手立即上报
+ *    （antd picker-view wheel.tsx）        -> 通用 XWheel 组件         ✅
+ * 5. min/max 逐列收窄（antd 全量支持）      -> 仅 minYear/maxYear     ⚠️ 差异，
+ *    维持现状：本项目只需要年份范围，无整段 Date 边界需求。
+ *
+ * 滚轮本体见 ./XWheel.tsx（与 XPicker 单列选择器共用）。
+ * ============================================================================
+ */
+import React from 'react';
+/** 六个单位（antd DatePrecision 的六个取值），也是列的固定顺序 */
+export type DateUnit = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
+/** 旧版两档模式（向后兼容，format 未传时生效） */
+export type XPickerDateMode = 'date' | 'time';
+export interface XPickerDateProps {
+    visible: boolean;
+    onClose: () => void;
+    /** 当前值：与 format 同格式的字符串（也接受 Date） */
+    value?: string | Date;
+    /** 确定回调：按 format 格式化后的字符串（如 'YYYY-MM-DD HH:mm:ss'） */
+    onChange?: (value: string) => void;
+    title?: string;
+    duration?: number;
+    /**
+     * 列配置：出现哪些单位 token（YYYY/MM/DD/HH/mm/ss）就显示哪些列，
+     * 顺序固定 年→月→日→时→分→秒。输入解析与输出格式化均使用它。
+     */
+    format?: string;
+    /** @deprecated 旧两档模式：date 等价 format='YYYY-MM-DD'，time 等价 format='HH:mm:ss'。与 format 同时传时以 format 为准 */
+    mode?: XPickerDateMode;
+    minYear?: number;
+    maxYear?: number;
+}
+export declare function XPickerDate({ visible, onClose, value, onChange, title, duration, format, mode, minYear, maxYear, }: XPickerDateProps): React.JSX.Element;