react-native-x-components 0.1.0

package/dist/XConfirmForm/index.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XConfirmForm —— 命令式确认框（duxui XConfirmForm 移植）
+ * ============================================================================
+ *
+ * 【声明式 vs 命令式】
+ * XActionSheet/XPicker 是"声明式"：页面里写 <xxx visible={...} />。
+ * XConfirmForm 是"命令式"：不用管 visible，直接调
+ *   const ok = await XConfirmForm.show({...})
+ *   const ok = await confirm({...})        // 别名，等价
+ * 返回 Promise<boolean>：true=点了确定，false=取消/点遮罩。
+ *
+ * 【如何做到"不用挂载就能调"？】
+ * 1. XPopupProvider 在应用根部常驻渲染 <XConfirmForm />（一个实例）；
+ * 2. 这个实例挂载时通过 XConfirmFormService._setHost({show, hide})
+ *    把自己"注册"到模块级变量 host；
+ * 3. XConfirmForm.show 内部实际调用 host.show —— 无论从哪个页面调用，
+ *    最终都落到根部那个常驻实例上。
+ * （LoadingModalProvider 用的就是同款套路，RN 没有原生 Portal，
+ *   这就是最常用的"伪 Portal"方案。）
+ *
+ * 【Promise 如何落地？】
+ * resolver 保存 Promise 的 resolve 函数：
+ * - show() 里 new Promise(resolve => resolver.current = resolve)；
+ * - 用户点确定 → hide(true) → resolver(true) → Promise 兑现为 true；
+ * - 点取消/遮罩 → hide(false) → Promise 兑现为 false。
+ * 注意：同一时间只允许一个确认框（后开的会覆盖前一个）。
+ * ============================================================================
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { XModalForm } from '../XModalForm';
+import { useXTheme } from '../theme';
+import { useXLocale } from '../XLocale';
+/**
+ * XConfirmFormComponent —— 常驻的确认框实例
+ * 本身也是一个"受控的 XModalForm"：visible 由内部状态控制。
+ */
+export const XConfirmFormComponent = () => {
+    const t = useXTheme();
+    const { t: i18n } = useXLocale();
+    /** 是否显示（由 show/hide 控制，页面无需感知） */
+    const [visible, setVisible] = useState(false);
+    /** 本次显示的配置 */
+    const [options, setOptions] = useState({});
+    /** 保存当前 Promise 的 resolve，点按钮时兑现它 */
+    const resolver = useRef(null);
+    /** 显示确认框，返回 Promise：确定→true，取消/遮罩→false */
+    const show = useCallback((opts) => {
+        setOptions(opts);
+        setVisible(true);
+        return new Promise(resolve => {
+            resolver.current = resolve;
+        });
+    }, []);
+    /** 关闭并按结果兑现 Promise（默认 false） */
+    const hide = useCallback((result) => {
+        resolver.current?.(result ?? false);
+        resolver.current = null;
+        setVisible(false);
+    }, []);
+    /** 挂载时把自己注册进 Service，卸载时反注册 */
+    useEffect(() => {
+        XConfirmFormService._setHost({ show, hide });
+        return () => XConfirmFormService._setHost(null);
+    }, [show, hide]);
+    const styles = useMemo(() => StyleSheet.create({
+        content: {
+            fontSize: 14,
+            lineHeight: 22,
+            textAlign: 'center',
+        },
+        dangerWrap: {
+            marginTop: 12,
+        },
+        dangerHint: {
+            fontSize: 12,
+            textAlign: 'center',
+        },
+    }), []);
+    return (_jsxs(XModalForm, { visible: visible, onClose: () => hide(false), title: options.title, confirmText: options.confirmText, cancelText: options.cancelText, onSubmit: () => {
+            // 点确定：兑现 true 并关闭
+            hide(true);
+            return true;
+        }, children: [typeof options.content === 'string' ? _jsx(Text, { style: [styles.content, { color: t.colorTextSecondary }], children: options.content }) : options.content, options.danger && (_jsx(View, { style: styles.dangerWrap, children: _jsx(Text, { style: [styles.dangerHint, { color: t.colorError }], children: i18n('operationIrreversible') }) }))] }));
+};
+/**
+ * XConfirmFormService —— 模块级全局服务
+ * host 是常驻实例注册进来的引用；模块加载时 host 为 null，
+ * 此时调用 show 会直接 resolve(false)（兜底，不会报错）。
+ */
+let host = null;
+export const XConfirmFormService = {
+    /** 由 XConfirmFormComponent 挂载/卸载时调用 */
+    _setHost: (h) => {
+        host = h;
+    },
+    show: (options) => host?.show(options) ?? Promise.resolve(false),
+    hide: () => host?.hide(false),
+};
+/**
+ * 对外导出的"组件 + 静态方法"：
+ * - <XConfirmForm />（XPopupProvider 里用的就是它）
+ * - XConfirmForm.show({...}) / XConfirmForm.hide()
+ * Object.assign 把静态方法挂到函数组件上。
+ */
+export const XConfirmForm = Object.assign(XConfirmFormComponent, {
+    show: XConfirmFormService.show,
+    hide: XConfirmFormService.hide,
+});
+/** 保留 duxui 的 confirm 命名风格：confirm({...}) 等价 XConfirmForm.show({...}) */
+export const confirm = XConfirmFormService.show;

package/dist/XDivider/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * ============================================================================
+ * XDivider —— 对标 antd Divider
+ * ============================================================================
+ *
+ * 支持的 antd API：
+ * - type: 'horizontal' | 'vertical'
+ * - dashed: 虚线（RN 实现方式：0 高度 + dashed 上边框，Android 上虚线密度固定，视觉近似）
+ * - orientation: 'left' | 'center' | 'right'（带 children 标题时分隔线的断开位置）
+ * - orientationMargin: 标题距屏幕边缘的距离（number，RN 无 '%' margin 字符串场景，仅收 number）
+ * - plain: 标题弱化样式（更浅的文字色）
+ * - children: 标题内容（如 <XDivider>标题</XDivider>）
+ *
+ * 与 antd 的差异：
+ * - orientationMargin 的 'xx%' 字符串不支持，只收 number
+ */
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface XDividerProps {
+    type?: 'horizontal' | 'vertical';
+    dashed?: boolean;
+    orientation?: 'left' | 'center' | 'right';
+    orientationMargin?: number;
+    plain?: boolean;
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    /** 分隔线颜色，默认 colorSplit */
+    color?: string;
+    /** vertical 模式的高度，默认撑满（alignSelf: 'stretch'） */
+    height?: number;
+}
+export declare function XDivider({ type, dashed, orientation, orientationMargin, plain, children, style, color, height, }: XDividerProps): React.JSX.Element;
+export default XDivider;

package/dist/XDivider/index.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, View, Text } from 'react-native';
+import { useXTheme, xTheme } from '../theme';
+export function XDivider({ type = 'horizontal', dashed = false, orientation = 'center', orientationMargin, plain = false, children, style, color, height, }) {
+    const t = useXTheme();
+    const lineColor = color ?? t.colorSplit;
+    // ---- 垂直分隔线：一条竖线，宽度 hairline，高度默认跟随父容器拉伸 ----
+    if (type === 'vertical') {
+        return (_jsx(View, { style: [
+                {
+                    width: StyleSheet.hairlineWidth,
+                    height: height,
+                    alignSelf: height ? 'center' : 'stretch',
+                    backgroundColor: lineColor,
+                    marginHorizontal: 8,
+                },
+                style,
+            ] }));
+    }
+    // ---- 水平分隔线（无标题）：一条横线 ----
+    if (children == null) {
+        return (_jsx(View, { style: [
+                styles.line,
+                { backgroundColor: dashed ? 'transparent' : lineColor },
+                dashed && { borderTopWidth: StyleSheet.hairlineWidth * 2, borderTopColor: lineColor, borderStyle: 'dashed' },
+                style,
+            ] }));
+    }
+    // ---- 水平带标题：线 — 标题 — 线，orientation 决定标题位置 ----
+    const hasLeftLine = orientation !== 'left';
+    const hasRightLine = orientation !== 'right';
+    // orientationMargin 生效规则（同 antd）：left 时约束左侧留白，right 时约束右侧留白
+    const leftMargin = orientation === 'left' ? orientationMargin ?? 16 : undefined;
+    const rightMargin = orientation === 'right' ? orientationMargin ?? 16 : undefined;
+    const lineStyle = [
+        styles.line,
+        styles.titleLine,
+        { backgroundColor: dashed ? 'transparent' : lineColor },
+        dashed && { borderTopWidth: StyleSheet.hairlineWidth * 2, borderTopColor: lineColor, borderStyle: 'dashed' },
+    ];
+    return (_jsxs(View, { style: [styles.titleContainer, { marginLeft: leftMargin, marginRight: rightMargin }, style], children: [hasLeftLine && _jsx(View, { style: lineStyle }), _jsx(Text, { style: [styles.title, { color: plain ? t.colorTextTertiary : t.colorText }, plain && { fontSize: xTheme.fontSizeSM }], allowFontScaling: false, children: children }), hasRightLine && _jsx(View, { style: lineStyle })] }));
+}
+const styles = StyleSheet.create({
+    line: {
+        height: StyleSheet.hairlineWidth,
+        width: '100%',
+    },
+    titleContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginVertical: 12,
+    },
+    titleLine: {
+        flex: 1,
+    },
+    title: {
+        fontSize: xTheme.fontSize,
+        marginHorizontal: 12,
+    },
+});
+export default XDivider;

package/dist/XDropdownMenu/index.d.ts

@@ -0,0 +1,66 @@
+/**
+ * ============================================================================
+ * XDropdownMenu —— 下拉菜单（duxui Menu 的 XTopView 版重写）
+ * ============================================================================
+ *
+ * 【回答"为什么用 XTopView 而不是 duxui 的方式"】
+ * duxui 的 Menu 用"页内 Absolute"（TopView.add 挂到页面层）实现，
+ * 需要每页包 TopView.page 宿主。本项目已有全局 XTopView 宿主
+ * （XPopupProvider 挂根），弹层直接 add 进宿主即可：
+ *   1. 不依赖页面容器 —— 任何组件树层级都能弹出；
+ *   2. 复用 XPullView 已验证的"挂载→入场→离场→移除"生命周期；
+ *   3. 动画走 Reanimated UI 线程，与项目弹窗族手感一致。
+ *
+ * 【结构与 duxui 对齐】
+ *   <XDropdownMenu>
+ *     <XDropdownMenu.Item title="全部" options={[{name,value}]} value onChange />
+ *     <XDropdownMenu.Item title="排序" options={...} value onChange />
+ *   </XDropdownMenu>
+ * 打开时：遮罩（点击关闭）+ 触发条"快照"（显示激活态标题，duxui 同思路）
+ * + 面板从触发条下方 translateY 下拉滑入；选中即回调 onChange 并关闭。
+ * Item 支持自定义 children 面板（替代 options 网格）。
+ *
+ * 【差异】v1 仅向下展开（绝大多数筛选场景）；多列宽度均分（duxui 支持自定义 column）。
+ * ============================================================================
+ */
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface XMenuOption {
+    name: string;
+    value: any;
+}
+export interface XDropdownMenuItemProps {
+    /** 无 options 时的触发文案 */
+    title?: string;
+    /** 选项列表（有 options 才渲染默认面板） */
+    options?: XMenuOption[];
+    /** 受控选中值 */
+    value?: any;
+    /** 选中回调（选中后面板自动关闭） */
+    onChange?: (value: any) => void;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 自定义面板内容（替代 options） */
+    children?: React.ReactNode;
+}
+export interface XDropdownMenuProps {
+    /** 面板底部是否圆角，默认 true */
+    round?: boolean;
+    /** 打开/关闭回调 */
+    onOpenChange?: (open: boolean) => void;
+    /** 触发条高度，默认 44 */
+    triggerHeight?: number;
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+}
+export declare function XDropdownMenu({ round, onOpenChange, triggerHeight, style, children }: XDropdownMenuProps): React.JSX.Element;
+/**
+ * 触发条单项（真实渲染）：从 MenuContext 拿到自己的序号与开合动作。
+ * 面板内容由 XDropdownMenu 直接读取 element.props 渲染，本组件只负责触发条 UI。
+ */
+export declare function XDropdownMenuItem(props: XDropdownMenuItemProps): React.JSX.Element | null;
+/** 挂载到 XDropdownMenu 上便于声明式使用：<XDropdownMenu.Item .../> */
+declare const MenuWithItem: typeof XDropdownMenu & {
+    Item: typeof XDropdownMenuItem;
+};
+export default MenuWithItem;

package/dist/XDropdownMenu/index.js

@@ -0,0 +1,258 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XDropdownMenu —— 下拉菜单（duxui Menu 的 XTopView 版重写）
+ * ============================================================================
+ *
+ * 【回答"为什么用 XTopView 而不是 duxui 的方式"】
+ * duxui 的 Menu 用"页内 Absolute"（TopView.add 挂到页面层）实现，
+ * 需要每页包 TopView.page 宿主。本项目已有全局 XTopView 宿主
+ * （XPopupProvider 挂根），弹层直接 add 进宿主即可：
+ *   1. 不依赖页面容器 —— 任何组件树层级都能弹出；
+ *   2. 复用 XPullView 已验证的"挂载→入场→离场→移除"生命周期；
+ *   3. 动画走 Reanimated UI 线程，与项目弹窗族手感一致。
+ *
+ * 【结构与 duxui 对齐】
+ *   <XDropdownMenu>
+ *     <XDropdownMenu.Item title="全部" options={[{name,value}]} value onChange />
+ *     <XDropdownMenu.Item title="排序" options={...} value onChange />
+ *   </XDropdownMenu>
+ * 打开时：遮罩（点击关闭）+ 触发条"快照"（显示激活态标题，duxui 同思路）
+ * + 面板从触发条下方 translateY 下拉滑入；选中即回调 onChange 并关闭。
+ * Item 支持自定义 children 面板（替代 options 网格）。
+ *
+ * 【差异】v1 仅向下展开（绝大多数筛选场景）；多列宽度均分（duxui 支持自定义 column）。
+ * ============================================================================
+ */
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useXTopViewStore } from '../XTopViewStore';
+import { useXTheme } from '../theme';
+const MenuContext = createContext(null);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+// ---------------------------------------------------------------------------
+// 触发条单项标题（真实触发与"快照"共用一套渲染）
+// ---------------------------------------------------------------------------
+function TriggerTitle({ itemProps, active, onPress, height, }) {
+    const t = useXTheme();
+    const color = itemProps.disabled
+        ? t.colorTextQuaternary
+        : active
+            ? t.colorPrimary
+            : t.colorText;
+    const selectedName = itemProps.options && itemProps.value !== undefined
+        ? itemProps.options.find(o => o.value === itemProps.value)?.name
+        : undefined;
+    const label = selectedName ?? itemProps.title;
+    return (_jsxs(Pressable, { onPress: onPress, style: [styles.triggerItem, { height }], disabled: itemProps.disabled || !onPress, children: [_jsx(Text, { style: [styles.triggerText, { color }, active && styles.triggerTextActive], numberOfLines: 1, allowFontScaling: false, children: label }), _jsx(Text, { style: [styles.arrow, { color }, active && styles.arrowOpen], allowFontScaling: false, children: "\u25BE" })] }));
+}
+const MenuOverlay = ({ visible, trigger, round, onClose, onExitEnd, snapshot, panel }) => {
+    const t = useXTheme();
+    /** 面板内容高度（onLayout 实测 → 决定位移初值） */
+    const [panelHeight, setPanelHeight] = useState(0);
+    const translateY = useSharedValue(0);
+    const maskOpacity = useSharedValue(0);
+    /**
+     * 面板位移：隐藏态 = -(panelHeight + 20)（藏在触发条上方），visible 后
+     * 下一帧滑到 0（duxui 的 translateY(-100%) 下拉）。panelHeight 未测得前
+     * 不动画，避免从 0 位置闪现。
+     */
+    useEffect(() => {
+        if (visible && panelHeight > 0) {
+            const raf = requestAnimationFrame(() => {
+                translateY.value = withTiming(0, { duration: 200, easing: Easing.out(Easing.ease) });
+                maskOpacity.value = withTiming(1, { duration: 200 });
+            });
+            return () => cancelAnimationFrame(raf);
+        }
+    }, [visible, panelHeight, translateY, maskOpacity]);
+    /** 离场：反向动画后通知宿主移除 */
+    useEffect(() => {
+        if (!visible) {
+            translateY.value = withTiming(-(panelHeight + 20), { duration: 200, easing: Easing.inOut(Easing.ease) });
+            maskOpacity.value = withTiming(0, { duration: 200 });
+            const timer = setTimeout(onExitEnd, 250);
+            return () => clearTimeout(timer);
+        }
+    }, [visible, panelHeight, translateY, maskOpacity, onExitEnd]);
+    const panelStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value }],
+    }));
+    const maskStyle = useAnimatedStyle(() => ({ opacity: maskOpacity.value }));
+    return (_jsxs(View, { style: StyleSheet.absoluteFill, pointerEvents: 'box-none', children: [_jsx(AnimatedPressable, { style: [StyleSheet.absoluteFill, { backgroundColor: '#000' }, maskStyle], onPress: onClose }), _jsx(View, { pointerEvents: 'none', style: { position: 'absolute', left: trigger.x, top: trigger.y, width: trigger.width, height: trigger.height }, children: snapshot }), _jsx(Animated.View, { style: [
+                    styles.panel,
+                    {
+                        left: trigger.x,
+                        top: trigger.y + trigger.height,
+                        width: trigger.width,
+                        backgroundColor: t.colorBgContainer,
+                        borderBottomLeftRadius: round ? t.borderRadiusXL : 0,
+                        borderBottomRightRadius: round ? t.borderRadiusXL : 0,
+                    },
+                    panelStyle,
+                ], pointerEvents: 'auto', children: _jsx(View, { onLayout: e => {
+                        const h = e.nativeEvent.layout.height;
+                        setPanelHeight(prev => (prev === h ? prev : h));
+                    }, children: panel }) })] }));
+};
+// ---------------------------------------------------------------------------
+// 对外组件
+// ---------------------------------------------------------------------------
+export function XDropdownMenu({ round = true, onOpenChange, triggerHeight = 44, style, children }) {
+    const t = useXTheme();
+    const add = useXTopViewStore(s => s.add);
+    const update = useXTopViewStore(s => s.update);
+    const remove = useXTopViewStore(s => s.remove);
+    /** 当前打开的 Item 下标；null = 关闭 */
+    const [activeIndex, setActiveIndex] = useState(null);
+    /** 触发条窗口坐标（打开瞬间 measureInWindow 实测） */
+    const [trigger, setTrigger] = useState({ x: 0, y: 0, width: 0, height: triggerHeight });
+    /** 面板宿主 key（XPullView 同款生命周期） */
+    const keyRef = useRef(null);
+    /** 最后一次打开的下标（离场动画需要保留面板内容） */
+    const lastOpenIndexRef = useRef(-1);
+    /** 触发条容器（measureInWindow 用） */
+    const triggerRef = useRef(null);
+    /** 子 Item 列表（保持声明式 API：通过 element.props 取 options/onChange/children） */
+    const items = useMemo(() => React.Children.toArray(children).filter(React.isValidElement), [children]);
+    const close = useCallback(() => setActiveIndex(null), []);
+    /** 打开某一项：实测触发条窗口坐标 → set 状态 → effect 挂载面板；同项再点 = 关闭 */
+    const open = useCallback((index) => {
+        if (index === activeIndex) {
+            close();
+            return;
+        }
+        triggerRef.current?.measureInWindow((x, y, width, height) => {
+            setTrigger({ x, y, width, height: height || triggerHeight });
+            setActiveIndex(prev => (prev === index ? prev : index));
+        });
+    }, [activeIndex, close, triggerHeight]);
+    /** onOpenChange 通知 */
+    useEffect(() => {
+        onOpenChange?.(activeIndex !== null);
+    }, [activeIndex, onOpenChange]);
+    /**
+     * 面板挂载/更新/移除：
+     * activeIndex 变化 → add/update 覆盖层（visible=true）；
+     * 变为 null → update 成 visible=false 播离场 → onExitEnd 移除。
+     */
+    const buildElement = useCallback((openIndex, visible) => {
+        const item = items[openIndex];
+        const itemProps = item?.props ?? {};
+        const handleClose = () => setActiveIndex(null);
+        /** 选项点击：回调 + 关闭 */
+        const handleOptionPress = (option) => {
+            itemProps.onChange?.(option.value);
+            handleClose();
+        };
+        return (_jsx(MenuOverlay, { visible: visible, trigger: trigger, round: round, onClose: handleClose, onExitEnd: () => {
+                if (keyRef.current) {
+                    remove(keyRef.current);
+                    keyRef.current = null;
+                }
+            }, snapshot: _jsx(View, { style: [styles.triggerRow, { height: trigger.height }], children: items.map((child, i) => (_jsx(TriggerTitle, { itemProps: child.props, active: i === openIndex, height: trigger.height }, i))) }), panel: itemProps.children != null ? (itemProps.children) : (_jsx(View, { style: styles.optionsWrap, children: (itemProps.options ?? []).map(option => {
+                    const selected = option.value === itemProps.value;
+                    return (_jsxs(Pressable, { onPress: () => handleOptionPress(option), style: ({ pressed }) => [
+                            styles.optionRow,
+                            { borderBottomColor: t.colorSplit },
+                            pressed && { backgroundColor: t.colorBgLayout },
+                        ], children: [_jsx(Text, { style: [
+                                    styles.optionText,
+                                    { color: selected ? t.colorPrimary : t.colorText },
+                                    selected && styles.optionTextActive,
+                                ], allowFontScaling: false, children: option.name }), selected && (_jsx(Text, { style: { color: t.colorPrimary, fontSize: 14 }, allowFontScaling: false, children: "\u2713" }))] }, String(option.value)));
+                }) })) }));
+    }, [items, trigger, round, remove, t]);
+    useEffect(() => {
+        if (activeIndex !== null) {
+            const el = buildElement(activeIndex, true);
+            if (!keyRef.current) {
+                keyRef.current = add(el);
+            }
+            else {
+                update(keyRef.current, el);
+            }
+            lastOpenIndexRef.current = activeIndex;
+        }
+        else if (keyRef.current && lastOpenIndexRef.current >= 0) {
+            // 关闭：更新为离场态（保留最后内容），动画后由 onExitEnd 移除
+            update(keyRef.current, buildElement(lastOpenIndexRef.current, false));
+        }
+    }, [activeIndex, buildElement, add, update]);
+    /** 卸载兜底清理 */
+    useEffect(() => {
+        return () => {
+            if (keyRef.current) {
+                remove(keyRef.current);
+                keyRef.current = null;
+            }
+        };
+    }, [remove]);
+    /** context value：open/close/activeIndex 分发给每个 Item */
+    const ctx = useMemo(() => ({ index: -1, activeIndex: activeIndex ?? -1, open, close, triggerHeight }), [activeIndex, open, close, triggerHeight]);
+    return (_jsx(View, { ref: triggerRef, style: [styles.triggerRow, { height: triggerHeight }, style], children: items.map((child, i) => (_jsx(MenuContext.Provider, { value: { ...ctx, index: i }, children: child }, i))) }));
+}
+/**
+ * 触发条单项（真实渲染）：从 MenuContext 拿到自己的序号与开合动作。
+ * 面板内容由 XDropdownMenu 直接读取 element.props 渲染，本组件只负责触发条 UI。
+ */
+export function XDropdownMenuItem(props) {
+    const ctx = useContext(MenuContext);
+    if (!ctx)
+        return null;
+    return (_jsx(TriggerTitle, { itemProps: props, active: ctx.activeIndex === ctx.index, onPress: () => !props.disabled && ctx.open(ctx.index), height: 0 }));
+}
+const styles = StyleSheet.create({
+    triggerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+    },
+    triggerItem: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 8,
+    },
+    triggerText: {
+        fontSize: 14,
+    },
+    triggerTextActive: {
+        fontWeight: '600',
+    },
+    arrow: {
+        fontSize: 10,
+        marginLeft: 4,
+    },
+    arrowOpen: {
+        transform: [{ rotate: '180deg' }],
+    },
+    panel: {
+        position: 'absolute',
+        overflow: 'hidden',
+    },
+    optionsWrap: {
+        paddingVertical: 4,
+    },
+    optionRow: {
+        height: 46,
+        paddingHorizontal: 16,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderBottomWidth: StyleSheet.hairlineWidth,
+    },
+    optionText: {
+        fontSize: 14,
+    },
+    optionTextActive: {
+        fontWeight: '600',
+    },
+});
+/** 挂载到 XDropdownMenu 上便于声明式使用：<XDropdownMenu.Item .../> */
+const MenuWithItem = XDropdownMenu;
+MenuWithItem.Item = XDropdownMenuItem;
+export default MenuWithItem;

package/dist/XElevator/index.d.ts

@@ -0,0 +1,52 @@
+/**
+ * ============================================================================
+ * XElevator —— 电梯楼层/字母导航列表（duxui Elevator 的 RN 原生重写版）
+ * ============================================================================
+ *
+ * 【与 duxui Elevator 的关系】
+ * duxui 用 ScrollView + Layout 手动累加每组高度算 scrollTop；
+ * RN 端 SectionList 原生支持分组吸顶 + scrollToLocation，
+ * 这里直接用 SectionList 重写：代码量减半、吸顶/定位更稳。
+ *
+ * 【右侧导航条】
+ * - 触摸（按下/滑动）定位：容器拦截 responder 事件，用 locationY 与
+ *   各标签 onLayout 记录的 y 区间比对，命中即 scrollToLocation；
+ * - 滚动联动高亮：onViewableItemsChanged 取第一个可见项所属 section。
+ *
+ * 【API 对标 duxui】list -> sections（{title, data}[]）、onItemClick、
+ * showNav、renderTop/Header/Footer/Empty；扩展 navLabel（导航条短标签，
+ * 默认取 title 首字符）、keyExtractor。
+ * ============================================================================
+ */
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface XElevatorSection<T = {
+    name: string;
+}> {
+    /** 分组标题（吸顶显示） */
+    title: string;
+    /** 右侧导航条短标签，默认取 title 首字符 */
+    navLabel?: string;
+    /** 数据 */
+    data: T[];
+}
+export interface XElevatorProps<T> {
+    sections: XElevatorSection<T>[];
+    /** 自定义行渲染，默认显示 item.name */
+    renderItem?: (item: T, section: XElevatorSection<T>, index: number) => React.ReactNode;
+    keyExtractor?: (item: T, index: number) => string;
+    onItemClick?: (item: T, section: XElevatorSection<T>) => void;
+    /** 是否显示右侧导航条，默认 true */
+    showNav?: boolean;
+    /** 列表顶部（搜索框等） */
+    renderTop?: () => React.ReactNode;
+    /** 列表底部 */
+    renderFooter?: () => React.ReactNode;
+    /** 空态 */
+    renderEmpty?: () => React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function XElevator<T = {
+    name: string;
+}>({ sections, renderItem, keyExtractor, onItemClick, showNav, renderTop, renderFooter, renderEmpty, style, }: XElevatorProps<T>): React.JSX.Element;
+export default XElevator;