react-native-x-components 0.1.0

package/dist/XCalendar/index.js

@@ -0,0 +1,241 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XCalendar —— 日历（duxui Calendar 的 TS + XTheme 重写版）
+ * ============================================================================
+ *
+ * 【与 duxui Calendar 的关系】
+ * 逻辑照抄 duxui：纯 View 网格自绘（不依赖任何日历库）、单选/周选/范围
+ * 三种模式统一按"范围"处理、min/max + disabledDate 拦截。
+ * 重写点：JSX → TS、静态色值 → useXTheme() token、文案 → i18n（中英）、
+ * 周起始默认周一（duxui 同款），多选支持 antd 式 multiple。
+ *
+ * 【模式与取值】
+ *   mode='day'    value: 'YYYY-MM-DD'          （multiple 时: string[]）
+ *   mode='week'   value: ['YYYY-MM-DD','YYYY-MM-DD']  所在周一起始
+ *   mode='scope'  value: ['YYYY-MM-DD','YYYY-MM-DD']  任意范围
+ *
+ * 【弹窗用法】配合 XCalendarPopup（底部 XPullView + 取消/确定工具栏，
+ * 样式对齐本项目 XPickerDate）。
+ * ============================================================================
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import dayjs from 'dayjs';
+import { useXTheme } from '../theme';
+import { useXLocale, xMonthTitle, X_WEEKDAYS } from '../XLocale';
+/** 值 → 有序范围 [start, end]（day 取自身；数组取 [0]/[1]） */
+function valueToScope(value, mode) {
+    if (!value)
+        return [null, null];
+    if (mode === 'day' && !Array.isArray(value)) {
+        const d = dayjs(value);
+        return [d.isValid() ? d : null, d.isValid() ? d : null];
+    }
+    if (Array.isArray(value) && value.length >= 2) {
+        const s = dayjs(value[0]);
+        const e = dayjs(value[1]);
+        if (s.isValid() && e.isValid())
+            return s.isAfter(e) ? [e, s] : [s, e];
+    }
+    return [null, null];
+}
+/** day 多选集合 */
+function valueToSet(value, multiple) {
+    if (!multiple)
+        return new Set();
+    if (Array.isArray(value))
+        return new Set(value);
+    if (typeof value === 'string' && value)
+        return new Set([value]);
+    return new Set();
+}
+export function XCalendar({ mode = 'day', value, defaultValue, multiple = false, onChange, min, max, disabledDate, weekStartsOn = 1, onMonthChange, style, }) {
+    const t = useXTheme();
+    const { locale } = useXLocale();
+    /** 非受控内部值 */
+    const [innerValue, setInnerValue] = useState(defaultValue);
+    const currentValue = value !== undefined ? value : innerValue;
+    /** 当前展示月份（日历允许翻月，与选中值解耦） */
+    const [viewMonth, setViewMonth] = useState(() => {
+        const scope = valueToScope(value ?? defaultValue, mode);
+        return (scope[0] ?? dayjs()).startOf('month');
+    });
+    /** scope 模式的"待第二次点击"暂存起点 */
+    const [pendingStart, setPendingStart] = useState(null);
+    /** 受控值变化 → 展示月份跟随（弹窗每次打开重置场景） */
+    useEffect(() => {
+        if (value !== undefined) {
+            const scope = valueToScope(value, mode);
+            if (scope[0]) {
+                setViewMonth(prev => (prev.isSame(scope[0], 'month') ? prev : scope[0].startOf('month')));
+            }
+        }
+    }, [value, mode]);
+    /** 是否禁用：min/max/disabledDate 三重拦截 */
+    const isDisabled = useCallback((d) => {
+        if (min && d.isBefore(dayjs(min).startOf('day')))
+            return true;
+        if (max && d.isAfter(dayjs(max).endOf('day')))
+            return true;
+        return disabledDate ? disabledDate(d) : false;
+    }, [min, max, disabledDate]);
+    /** 上/下月（越 min/max 月份边界时按钮禁用） */
+    const shiftMonth = useCallback((delta) => {
+        const next = viewMonth.add(delta, 'month');
+        if (min && next.endOf('month').isBefore(dayjs(min).startOf('day')))
+            return;
+        if (max && next.startOf('month').isAfter(dayjs(max).endOf('day')))
+            return;
+        setViewMonth(next);
+        onMonthChange?.(next.year(), next.month() + 1);
+    }, [viewMonth, min, max, onMonthChange]);
+    /** 42 格数据：6 行 × 7 列，非当月补位 */
+    const cells = useMemo(() => {
+        const first = viewMonth.startOf('month');
+        // 当月 1 号距离周起始的偏移（0~6）
+        const offset = (first.day() - weekStartsOn + 7) % 7;
+        const gridStart = first.subtract(offset, 'day');
+        return Array.from({ length: 42 }, (_, i) => gridStart.add(i, 'day'));
+    }, [viewMonth, weekStartsOn]);
+    /** 星期表头（本地化 + 周起始对齐） */
+    const weekHeaders = useMemo(() => {
+        const all = X_WEEKDAYS[locale] ?? X_WEEKDAYS['zh-CN'];
+        return weekStartsOn === 1 ? all : [all[6], ...all.slice(0, 6)];
+    }, [locale, weekStartsOn]);
+    /** 选中范围（渲染用） */
+    const [selStart, selEnd] = useMemo(() => valueToScope(currentValue, mode), [currentValue, mode]);
+    /** 多选集合 */
+    const selectedSet = useMemo(() => valueToSet(currentValue, multiple && mode === 'day'), [currentValue, multiple, mode]);
+    /** 点击一天 */
+    const handleDayPress = useCallback((d) => {
+        if (isDisabled(d))
+            return;
+        const key = d.format('YYYY-MM-DD');
+        if (mode === 'day') {
+            if (multiple) {
+                const base = valueToSet(currentValue, true);
+                base.has(key) ? base.delete(key) : base.add(key);
+                const next = Array.from(base);
+                setInnerValue(next);
+                onChange?.(next);
+            }
+            else {
+                setInnerValue(key);
+                onChange?.(key);
+            }
+            return;
+        }
+        if (mode === 'week') {
+            // 整周范围：按周起始推导
+            const offset = (d.day() - weekStartsOn + 7) % 7;
+            const start = d.subtract(offset, 'day');
+            const end = start.add(6, 'day');
+            const next = [start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD')];
+            setInnerValue(next);
+            onChange?.(next);
+            return;
+        }
+        // scope：两段式选择
+        if (!pendingStart) {
+            setPendingStart(d);
+            return;
+        }
+        const [start, end] = pendingStart.isAfter(d) ? [d, pendingStart] : [pendingStart, d];
+        const next = [start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD')];
+        setPendingStart(null);
+        setInnerValue(next);
+        onChange?.(next);
+    }, [mode, multiple, currentValue, onChange, weekStartsOn, pendingStart, isDisabled]);
+    /** 单元格样式计算 */
+    const cellState = useCallback((d) => {
+        const key = d.format('YYYY-MM-DD');
+        const disabled = isDisabled(d);
+        const isToday = d.isSame(dayjs(), 'day');
+        let selected = false;
+        let inRange = false;
+        if (mode === 'day') {
+            selected = multiple ? selectedSet.has(key) : key === selStart?.format('YYYY-MM-DD');
+        }
+        else if (selStart && selEnd) {
+            // week/scope：起止实心、中间浅底（week 模式每次选中天然成对）
+            selected = key === selStart.format('YYYY-MM-DD') || key === selEnd.format('YYYY-MM-DD');
+            inRange = d.isAfter(selStart, 'day') && d.isBefore(selEnd, 'day');
+        }
+        else if (mode === 'scope' && pendingStart) {
+            selected = key === pendingStart.format('YYYY-MM-DD');
+        }
+        return { selected, inRange, disabled, isToday };
+    }, [mode, multiple, selectedSet, selStart, selEnd, pendingStart, isDisabled]);
+    const renderCell = (d, index) => {
+        const inMonth = d.isSame(viewMonth, 'month');
+        const { selected, inRange, disabled, isToday } = cellState(d);
+        const textColor = disabled
+            ? t.colorTextQuaternary
+            : selected
+                ? t.colorTextLightSolid
+                : inRange
+                    ? t.colorPrimary
+                    : t.colorText;
+        return (_jsx(Pressable, { onPress: () => handleDayPress(d), disabled: disabled, style: [styles.cell, (inRange || selected) && { backgroundColor: inRange ? t.colorPrimaryBg : 'transparent' }], children: _jsx(View, { style: [
+                    styles.cellInner,
+                    selected && { backgroundColor: t.colorPrimary, borderRadius: t.borderRadius },
+                    !selected && isToday && { borderWidth: StyleSheet.hairlineWidth, borderColor: t.colorPrimary, borderRadius: t.borderRadius },
+                ], children: _jsx(Text, { style: [styles.dayText, { color: textColor }, !inMonth && styles.dim], allowFontScaling: false, children: d.date() }) }) }, index));
+    };
+    /** 月份切换按钮通用样式 */
+    const arrowColor = t.colorTextSecondary;
+    const canPrev = !(min && viewMonth.subtract(1, 'month').endOf('month').isBefore(dayjs(min).startOf('day')));
+    const canNext = !(max && viewMonth.add(1, 'month').startOf('month').isAfter(dayjs(max).endOf('day')));
+    return (_jsxs(View, { style: style, children: [_jsxs(View, { style: styles.header, children: [_jsx(Pressable, { onPress: () => shiftMonth(-1), disabled: !canPrev, hitSlop: 8, style: styles.arrowBtn, children: _jsx(Text, { style: [styles.arrow, { color: canPrev ? arrowColor : t.colorTextQuaternary }], allowFontScaling: false, children: "\u2039" }) }), _jsx(Text, { style: [styles.monthTitle, { color: t.colorText }], allowFontScaling: false, children: xMonthTitle(locale, viewMonth.year(), viewMonth.month() + 1) }), _jsx(Pressable, { onPress: () => shiftMonth(1), disabled: !canNext, hitSlop: 8, style: styles.arrowBtn, children: _jsx(Text, { style: [styles.arrow, { color: canNext ? arrowColor : t.colorTextQuaternary }], allowFontScaling: false, children: "\u203A" }) })] }), _jsx(View, { style: styles.weekRow, children: weekHeaders.map((label, i) => (_jsx(View, { style: styles.cell, children: _jsx(Text, { style: [styles.weekText, { color: t.colorTextTertiary }], allowFontScaling: false, children: label }) }, i))) }), [0, 1, 2, 3, 4, 5].map(row => (_jsx(View, { style: styles.weekRow, children: cells.slice(row * 7, row * 7 + 7).map(renderCell) }, row)))] }));
+}
+const styles = StyleSheet.create({
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 8,
+    },
+    monthTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    arrowBtn: {
+        width: 36,
+        height: 36,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    arrow: {
+        fontSize: 22,
+        lineHeight: 26,
+    },
+    weekRow: {
+        flexDirection: 'row',
+    },
+    weekText: {
+        fontSize: 12,
+        textAlign: 'center',
+    },
+    cell: {
+        flex: 1,
+        aspectRatio: 1.15,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    cellInner: {
+        minWidth: 30,
+        height: 30,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 6,
+    },
+    dayText: {
+        fontSize: 15,
+        textAlign: 'center',
+    },
+    dim: {
+        opacity: 0.35,
+    },
+});
+export default XCalendar;

package/dist/XCarousel/index.d.ts

@@ -0,0 +1,72 @@
+/**
+ * ============================================================================
+ * XCarousel —— 轮播图（duxui Swiper 的 RN 原生重写版）
+ * ============================================================================
+ *
+ * 【与 duxui Swiper 的关系】
+ * duxui 的 Swiper 直接封装 Taro <Swiper>（RN 端是 Taro 适配层），
+ * 本项目脱离 Taro 运行时，这里用原生 ScrollView pagingEnabled 自实现，
+ * 并补齐 duxui 没有的「无限循环」（克隆首尾页 + 落点归位）。
+ *
+ * 【实现要点】
+ * 1. 无限循环：pages = [克隆尾页, ...data, 克隆首页]，初始停在真实首页；
+ *    onMomentumScrollEnd 检测到落在克隆页时，立即无动画滚回真实页，
+ *    视觉上完全无感；
+ * 2. 自动播放：setInterval 定时 scrollTo 下一页（animated），当前下标以
+ *    currentRef 为单一数据源（momentum 回调同步回写）；手指拖动期间
+ *    （onScrollBeginDrag）暂停，松手后恢复，避免"抢手感"；
+ * 3. 指示点：自绘 View（duxui 的 dot/dotColor/dotSelectColor/dotDistance 同名 props）；
+ * 4. 容器宽度用 onLayout 实测（不依赖 Dimensions，适配分屏/旋转），
+ *    首次测量完成后做一次初始落位。
+ *
+ * 【对标 duxui API】autoplay/interval/circular/vertical/dot/dotColor/
+ * dotSelectColor/dotDistance/defaultCurrent 全保留；差异：RN 端用
+ * renderItem 数据驱动（duxui 是 SwiperItem 子组件声明式），更贴合列表习惯。
+ * ============================================================================
+ */
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+/** 单条数据：优先级 render > image > color（title 叠加在色块上，便于无图演示） */
+export interface XCarouselItem {
+    /** 网络图/本地图 */
+    image?: {
+        uri: string;
+    } | number;
+    /** 无图时用纯色块占位 */
+    color?: string;
+    /** 色块上的标题文字（可选） */
+    title?: string;
+    /** 完全自定义渲染 */
+    render?: () => React.ReactNode;
+}
+export interface XCarouselProps {
+    /** 数据源 */
+    data: XCarouselItem[];
+    /** 自定义渲染每页 */
+    renderItem?: (item: XCarouselItem, index: number) => React.ReactNode;
+    /** 自动播放，默认 true（data.length <= 1 时自动关闭） */
+    autoplay?: boolean;
+    /** 自动播放间隔 ms，默认 3000 */
+    interval?: number;
+    /** 无限循环，默认 true */
+    circular?: boolean;
+    /** 纵向轮播，默认 false */
+    vertical?: boolean;
+    /** 是否显示指示点，默认 true */
+    dot?: boolean;
+    /** 指示点颜色（未选中），默认白 40% */
+    dotColor?: string;
+    /** 指示点选中色，默认白色 */
+    dotSelectColor?: string;
+    /** 指示点间距，默认 6 */
+    dotDistance?: number;
+    /** 初始页（真实数据下标），默认 0 */
+    defaultCurrent?: number;
+    /** 高度，默认 180 */
+    height?: number;
+    /** 页面切换回调（真实数据下标） */
+    onIndexChange?: (index: number) => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function XCarousel({ data, renderItem, autoplay, interval, circular, vertical, dot, dotColor, dotSelectColor, dotDistance, defaultCurrent, height, onIndexChange, style, }: XCarouselProps): React.JSX.Element;
+export default XCarousel;

package/dist/XCarousel/index.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XCarousel —— 轮播图（duxui Swiper 的 RN 原生重写版）
+ * ============================================================================
+ *
+ * 【与 duxui Swiper 的关系】
+ * duxui 的 Swiper 直接封装 Taro <Swiper>（RN 端是 Taro 适配层），
+ * 本项目脱离 Taro 运行时，这里用原生 ScrollView pagingEnabled 自实现，
+ * 并补齐 duxui 没有的「无限循环」（克隆首尾页 + 落点归位）。
+ *
+ * 【实现要点】
+ * 1. 无限循环：pages = [克隆尾页, ...data, 克隆首页]，初始停在真实首页；
+ *    onMomentumScrollEnd 检测到落在克隆页时，立即无动画滚回真实页，
+ *    视觉上完全无感；
+ * 2. 自动播放：setInterval 定时 scrollTo 下一页（animated），当前下标以
+ *    currentRef 为单一数据源（momentum 回调同步回写）；手指拖动期间
+ *    （onScrollBeginDrag）暂停，松手后恢复，避免"抢手感"；
+ * 3. 指示点：自绘 View（duxui 的 dot/dotColor/dotSelectColor/dotDistance 同名 props）；
+ * 4. 容器宽度用 onLayout 实测（不依赖 Dimensions，适配分屏/旋转），
+ *    首次测量完成后做一次初始落位。
+ *
+ * 【对标 duxui API】autoplay/interval/circular/vertical/dot/dotColor/
+ * dotSelectColor/dotDistance/defaultCurrent 全保留；差异：RN 端用
+ * renderItem 数据驱动（duxui 是 SwiperItem 子组件声明式），更贴合列表习惯。
+ * ============================================================================
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Dimensions, Image, ScrollView, StyleSheet, Text, View, } from 'react-native';
+import { useXTheme } from '../theme';
+/** 取一次屏幕宽做初始兜底（onLayout 首帧后立刻被真实宽度覆盖） */
+const INITIAL_WIDTH = Dimensions.get('window').width;
+export function XCarousel({ data, renderItem, autoplay = true, interval = 3000, circular = true, vertical = false, dot = true, dotColor, dotSelectColor, dotDistance = 6, defaultCurrent = 0, height = 180, onIndexChange, style, }) {
+    const t = useXTheme();
+    const listRef = useRef(null);
+    /** 容器宽度（onLayout 实测） */
+    const [width, setWidth] = useState(INITIAL_WIDTH);
+    /** 当前真实数据下标（渲染指示点用） */
+    const [current, setCurrent] = useState(defaultCurrent);
+    /** 当前真实下标的 ref（自动播放的单一数据源，避免 setState 副作用） */
+    const currentRef = useRef(defaultCurrent);
+    /** 手指拖动中：暂停自动播放 */
+    const draggingRef = useRef(false);
+    /** 是否已完成初始落位 */
+    const positionedRef = useRef(false);
+    const count = data.length;
+    const single = count <= 1;
+    /**
+     * 循环模式：首尾各克隆一页。
+     * pages[0] = data[count-1]，pages[count+1] = data[0]，
+     * 真实页在 [1, count]，初始落位 pages 下标 = defaultCurrent + 1。
+     */
+    const pages = useMemo(() => {
+        if (single || !circular)
+            return data;
+        return [data[count - 1], ...data, data[0]];
+    }, [data, circular, single, count]);
+    /** 真实下标 → pages 下标（含克隆偏移） */
+    const toPageIndex = useCallback((realIndex) => realIndex + 1, []);
+    /** pages 下标 → 真实下标（克隆页归一化到 0 / count-1） */
+    const toRealIndex = useCallback((pageIndex) => {
+        if (pageIndex <= 0)
+            return count - 1;
+        if (pageIndex >= count + 1)
+            return 0;
+        return pageIndex - 1;
+    }, [count]);
+    /** 滚动到指定 pages 下标 */
+    const scrollToPage = useCallback((pageIndex, animated) => {
+        listRef.current?.scrollTo(vertical ? { y: pageIndex * height, animated } : { x: pageIndex * width, animated });
+    }, [vertical, height, width]);
+    /** 真实下标上报 + 指示点同步（ref 与 state 同步更新） */
+    const reportReal = useCallback((realIndex) => {
+        currentRef.current = realIndex;
+        setCurrent(prev => (prev === realIndex ? prev : realIndex));
+        onIndexChange?.(realIndex);
+    }, [onIndexChange]);
+    /** 首次测得真实宽度后做初始落位（落在 defaultCurrent 对应真实页） */
+    const handleLayout = useCallback((e) => {
+        const w = e.nativeEvent.layout.width;
+        setWidth(prev => {
+            positionedRef.current = true;
+            const pageIndex = toPageIndex(currentRef.current);
+            // 无动画跳到初始页；用实测宽度计算，rAF 等 ScrollView 完成布局
+            requestAnimationFrame(() => listRef.current?.scrollTo(vertical ? { y: pageIndex * height, animated: false } : { x: pageIndex * w, animated: false }));
+            return prev === w ? prev : w;
+        });
+    }, [toPageIndex, vertical, height]);
+    /**
+     * onMomentumScrollEnd 统一处理：
+     * 1. 由 pages 下标算真实下标并上报；
+     * 2. 落在克隆页时立即无动画归位（用户无感）。
+     */
+    const handleMomentumEnd = useCallback((e) => {
+        const offset = vertical ? e.nativeEvent.contentOffset.y : e.nativeEvent.contentOffset.x;
+        const size = vertical ? height : width;
+        if (size <= 0)
+            return;
+        const pageIndex = Math.round(offset / size);
+        if (!single && circular) {
+            if (pageIndex === 0) {
+                // 落在"尾页克隆"→ 归位到真实最后一页
+                reportReal(count - 1);
+                scrollToPage(1, false);
+                return;
+            }
+            if (pageIndex === count + 1) {
+                // 落在"首页克隆"→ 归位到真实第一页
+                reportReal(0);
+                scrollToPage(count, false);
+                return;
+            }
+            reportReal(toRealIndex(pageIndex));
+            return;
+        }
+        const realIndex = Math.min(Math.max(pageIndex, 0), count - 1);
+        reportReal(realIndex);
+    }, [vertical, height, width, single, circular, count, reportReal, scrollToPage, toRealIndex]);
+    /** 自动播放：拖动暂停；interval 到点滚向下一页（末页循环回首） */
+    useEffect(() => {
+        if (!autoplay || single)
+            return;
+        const timer = setInterval(() => {
+            if (draggingRef.current)
+                return;
+            const nextReal = (currentRef.current + 1) % count;
+            scrollToPage(toPageIndex(nextReal), true);
+        }, interval);
+        return () => clearInterval(timer);
+    }, [autoplay, single, interval, count, scrollToPage, toPageIndex]);
+    /** 指示点最终颜色（默认适配图片场景：白点；可覆盖） */
+    const inactiveDot = dotColor ?? 'rgba(255, 255, 255, 0.4)';
+    const activeDot = dotSelectColor ?? t.colorTextLightSolid;
+    /** 单页渲染 */
+    const renderPage = (item, realIndex) => {
+        if (renderItem)
+            return renderItem(item, realIndex);
+        if (item.render)
+            return item.render();
+        if (item.image) {
+            return _jsx(Image, { source: item.image, style: styles.image, resizeMode: 'cover' });
+        }
+        return (_jsx(View, { style: [styles.colorPage, { backgroundColor: item.color ?? t.colorPrimary }], children: item.title ? _jsx(Text, { style: styles.title, children: item.title }) : null }));
+    };
+    return (_jsxs(View, { style: [styles.container, { height, borderRadius: t.borderRadiusXL }, style], onLayout: handleLayout, children: [_jsx(ScrollView, { ref: listRef, horizontal: !vertical, pagingEnabled: true, showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, onScrollBeginDrag: () => (draggingRef.current = true), onScrollEndDrag: () => (draggingRef.current = false), onMomentumScrollEnd: handleMomentumEnd, children: pages.map((item, pageIndex) => (_jsx(View, { style: { width, height }, children: renderPage(item, Math.min(Math.max(toRealIndex(pageIndex), 0), count - 1)) }, pageIndex))) }), dot && count > 1 && (_jsx(View, { style: styles.dots, pointerEvents: 'none', children: data.map((_, i) => (_jsx(View, { style: [
+                        styles.dot,
+                        { marginHorizontal: dotDistance / 2, backgroundColor: i === current ? activeDot : inactiveDot },
+                    ] }, i))) }))] }));
+}
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+        backgroundColor: '#ddd',
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    colorPage: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    title: {
+        color: '#fff',
+        fontSize: 20,
+        fontWeight: '600',
+    },
+    dots: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 10,
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+    dot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+    },
+});
+export default XCarousel;

package/dist/XCascadeSelect/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ============================================================================
+ * XCascadeSelect —— 级联选择器（antd Cascader 的 RN 自实现版）
+ * ============================================================================
+ *
+ * 数据结构（antd Cascader 同款）：
+ *   options = [{label, value, children: [{label, value, children: ...}]}]
+ *   value   = ['hunan', 'changsha', 'yuelu']（各级 value 组成的路径数组）
+ *   展示    = 湖南 / 长沙 / 岳麓（路径上各级 label 用 " / " 连接）
+ *
+ * 交互形态：点击触发区弹出底部面板（XPullView），多列滚轮（XWheel）联动——
+ * 改动第 i 列会截断更深的路径，后续列选项自动跟着变。
+ * 路径必须走到叶子（没有 children 的选项）才能点确定。
+ *
+ * 用法（Form.Item 注入 value/onChange 即可作表单控件）：
+ *   <XCascadeSelect options={AREA_DATA} placeholder='请选择省市区' />
+ */
+import React from 'react';
+export interface XCascadeOption {
+    label: string;
+    value: any;
+    disabled?: boolean;
+    children?: XCascadeOption[];
+}
+export interface XCascadeSelectProps {
+    /** 路径数组：每级选中的 value（如 ['hunan','changsha','yuelu']） */
+    value?: any[];
+    onChange?: (path: any[]) => void;
+    options: XCascadeOption[];
+    placeholder?: string;
+    /** 弹层标题，默认"请选择" */
+    title?: string;
+    /** 自定义触发器（不传则渲染默认的输入框样式触发区） */
+    children?: React.ReactNode;
+}
+/** 沿路径取各级选项（找不到即截断） */
+export declare function getCascadePathOptions(options: XCascadeOption[], path: any[]): XCascadeOption[];
+export declare function XCascadeSelect({ value, onChange, options, placeholder, title, children }: XCascadeSelectProps): React.JSX.Element;
+export default XCascadeSelect;