react-native-x-components 0.1.0

package/dist/XCascadeSelect/index.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * 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 { useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { XPullView } from '../XPullView';
+import { XWheel } from '../XWheel';
+import { useXTheme } from '../theme';
+import { useXLocale } from '../XLocale';
+import AntDesign from '@react-native-vector-icons/ant-design';
+/** 沿路径取各级选项（找不到即截断） */
+export function getCascadePathOptions(options, path) {
+    const result = [];
+    let cur = options;
+    for (const v of path) {
+        const hit = cur?.find(o => o.value === v);
+        if (!hit)
+            break;
+        result.push(hit);
+        cur = hit.children ?? [];
+    }
+    return result;
+}
+/** 路径是否走到叶子（末级选项没有 children） */
+function isPathComplete(options, path) {
+    const nodes = getCascadePathOptions(options, path);
+    if (nodes.length !== path.length || nodes.length === 0)
+        return false;
+    return !nodes[nodes.length - 1].children?.length;
+}
+export function XCascadeSelect({ value, onChange, options, placeholder, title, children }) {
+    const theme = useXTheme();
+    const { t } = useXLocale();
+    const resolvedPlaceholder = placeholder ?? t('pleaseSelect');
+    const resolvedTitle = title ?? t('pleaseSelect');
+    const [visible, setVisible] = useState(false);
+    /** 面板内的临时路径，确定时才回传 */
+    const [draft, setDraft] = useState([]);
+    /** 上一次的 visible，识别"刚被打开"同步草稿 */
+    const prevVisibleRef = useRef(visible);
+    if (visible && !prevVisibleRef.current) {
+        setDraft(value ?? []);
+    }
+    prevVisibleRef.current = visible;
+    /**
+     * 各列选项：第 0 列 = options，第 i 列 = draft[i-1] 的 children。
+     * draft 改动第 i 项后，更深的列会整体消失/重建（联动）。
+     */
+    const columns = useMemo(() => {
+        const cols = [options];
+        let cur = options;
+        for (const v of draft) {
+            const next = cur?.find(o => o.value === v)?.children;
+            if (!next?.length)
+                break;
+            cols.push(next);
+            cur = next;
+        }
+        return cols;
+    }, [options, draft]);
+    const complete = isPathComplete(options, draft);
+    const display = (value?.length ? getCascadePathOptions(options, value).map(o => o.label) : []).join(' / ');
+    /** 每列一个 wheel 句柄，确定时按视觉位置结算（拖拽/spring 进行中也正确） */
+    const wheelRefs = useRef([]);
+    wheelRefs.current = [];
+    const handleColumnSelect = (colIndex, v) => {
+        // 改第 i 列：截断更深路径后落下当前值，后续列自动联动
+        setDraft(prev => [...prev.slice(0, colIndex), v]);
+    };
+    const handleConfirm = () => {
+        if (!complete)
+            return;
+        // 结算：以每列滚轮当前视觉位置为准（与 XPicker 同款 flush 策略）
+        const flushed = wheelRefs.current.slice(0, columns.length).map(w => w?.flush()?.value);
+        const path = flushed.filter(v => v !== undefined);
+        if (!isPathComplete(options, path))
+            return;
+        onChange?.(path);
+        setVisible(false);
+    };
+    return (_jsxs(_Fragment, { children: [children ? (_jsx(Pressable, { onPress: () => setVisible(true), children: children })) : (_jsxs(Pressable, { style: [styles.trigger, { borderColor: theme.colorBorder, backgroundColor: theme.colorBgLayout }], onPress: () => setVisible(true), children: [_jsx(Text, { style: [styles.triggerText, { color: display ? theme.colorText : theme.colorTextQuaternary }], allowFontScaling: false, children: display || resolvedPlaceholder }), _jsx(AntDesign, { name: 'right', size: 16, color: theme.colorTextTertiary })] })), _jsx(XPullView, { visible: visible, onClose: () => setVisible(false), side: 'bottom', duration: 200, children: _jsxs(View, { style: [styles.panel, { backgroundColor: theme.colorBgContainer }], children: [_jsxs(View, { style: [styles.header, { borderBottomColor: theme.colorSplit }], children: [_jsx(Pressable, { onPress: () => setVisible(false), hitSlop: 8, children: _jsx(Text, { style: [styles.headerBtn, { color: theme.colorTextSecondary }], children: t('cancel') }) }), _jsx(Text, { style: [styles.headerTitle, { color: theme.colorText }], children: resolvedTitle }), _jsx(Pressable, { onPress: handleConfirm, hitSlop: 8, disabled: !complete, children: _jsx(Text, { style: [styles.headerBtn, styles.confirmBtn, { color: !complete ? theme.colorTextQuaternary : theme.colorPrimary }], children: t('confirm') }) })] }), _jsx(View, { style: styles.wheelRow, children: columns.map((col, i) => (_jsx(View, { style: styles.wheelCol, children: _jsx(XWheel, { ref: (r) => {
+                                        wheelRefs.current[i] = r;
+                                    }, items: col, value: draft[i], onSelect: v => handleColumnSelect(i, v) }) }, i))) })] }) })] }));
+}
+const styles = StyleSheet.create({
+    trigger: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        minHeight: 40,
+    },
+    triggerText: {
+        flex: 1,
+        fontSize: 15,
+        marginRight: 8,
+    },
+    panel: {
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+        paddingBottom: 20,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        height: 48,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+    },
+    headerTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    headerBtn: {
+        fontSize: 15,
+        paddingHorizontal: 4,
+    },
+    confirmBtn: {
+        fontWeight: '600',
+    },
+    wheelRow: {
+        flexDirection: 'row',
+    },
+    wheelCol: {
+        flex: 1,
+    },
+});
+export default XCascadeSelect;

package/dist/XChart/index.d.ts

@@ -0,0 +1,78 @@
+/**
+ * ============================================================================
+ * XChart —— 轻量图表三件套（react-native-svg 自研）
+ * ============================================================================
+ *
+ * 【方案定位】用户选定方案：基于项目已有 react-native-svg 自研，
+ * 不引第三方图表库 —— 体积小、无原生依赖、token 与 XTheme 完全一致。
+ * 覆盖最常用三类：
+ *   - XLineChart  折线/面积图（平滑曲线、网格线、数据点）
+ *   - XBarChart   柱状图（圆角柱、逐柱配色、顶部数值）
+ *   - XPieChart   饼图/环形图（donut、中心文案、图例）
+ *
+ * 【实现约定】
+ * - 宽度 onLayout 实测（不写死，适配容器），高度 props 指定；
+ * - 颜色默认取 useXTheme() token，可逐项覆盖；
+ * - 纯声明式渲染，数据变化即重绘（SVG 无动画库依赖，入场动画后续版本可加）。
+ * ============================================================================
+ */
+import React from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+export interface XLineChartProps {
+    /** 数值序列 */
+    data: number[];
+    /** x 轴标签（可与 data 等长，超出抽样显示） */
+    labels?: string[];
+    height?: number;
+    /** 线色，默认 colorPrimary */
+    color?: string;
+    /** 面积填充（渐变到透明），默认 false */
+    area?: boolean;
+    /** 平滑曲线，默认 true */
+    smooth?: boolean;
+    /** 水平网格线条数，默认 4（0 关闭） */
+    grid?: number;
+    /** 数据点上方显示数值，默认 false */
+    showValues?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function XLineChart({ data, labels, height, color, area, smooth, grid, showValues, style, }: XLineChartProps): React.JSX.Element;
+export interface XBarChartItem {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface XBarChartProps {
+    data: XBarChartItem[];
+    height?: number;
+    /** 柱宽占比（0~1），默认 0.5 */
+    barWidthRatio?: number;
+    /** 顶部显示数值，默认 true */
+    showValues?: boolean;
+    grid?: number;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function XBarChart({ data, height, barWidthRatio, showValues, grid, style }: XBarChartProps): React.JSX.Element;
+export interface XPieChartItem {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface XPieChartProps {
+    data: XPieChartItem[];
+    height?: number;
+    /** 环形（donut），默认 true */
+    donut?: boolean;
+    /** 环心文案 */
+    centerLabel?: string;
+    /** 图例，默认显示 */
+    legend?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function XPieChart({ data, height, donut, centerLabel, legend, style }: XPieChartProps): React.JSX.Element;
+declare const _default: {
+    XLineChart: typeof XLineChart;
+    XBarChart: typeof XBarChart;
+    XPieChart: typeof XPieChart;
+};
+export default _default;

package/dist/XChart/index.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XChart —— 轻量图表三件套（react-native-svg 自研）
+ * ============================================================================
+ *
+ * 【方案定位】用户选定方案：基于项目已有 react-native-svg 自研，
+ * 不引第三方图表库 —— 体积小、无原生依赖、token 与 XTheme 完全一致。
+ * 覆盖最常用三类：
+ *   - XLineChart  折线/面积图（平滑曲线、网格线、数据点）
+ *   - XBarChart   柱状图（圆角柱、逐柱配色、顶部数值）
+ *   - XPieChart   饼图/环形图（donut、中心文案、图例）
+ *
+ * 【实现约定】
+ * - 宽度 onLayout 实测（不写死，适配容器），高度 props 指定；
+ * - 颜色默认取 useXTheme() token，可逐项覆盖；
+ * - 纯声明式渲染，数据变化即重绘（SVG 无动画库依赖，入场动画后续版本可加）。
+ * ============================================================================
+ */
+import React, { useCallback, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Svg, { Circle, Defs, Line, LinearGradient, Path, Rect, Stop, Text as SvgText } from 'react-native-svg';
+import { useXTheme } from '../theme';
+/** 默认分类色板（主色打头，暗黑下同样可读） */
+function palette(t) {
+    return [t.colorPrimary, t.colorSuccess, t.colorWarning, t.colorError, '#8C8CFF', '#36CFC9', '#FF9C6E', '#5CDBD3'];
+}
+/** 宽度自测量 Hook */
+function useChartWidth() {
+    const [width, setWidth] = useState(0);
+    const onLayout = useCallback((e) => {
+        const w = e.nativeEvent.layout.width;
+        setWidth(prev => (prev === w ? prev : w));
+    }, []);
+    return { width, onLayout };
+}
+export function XLineChart({ data, labels, height = 220, color, area = false, smooth = true, grid = 4, showValues = false, style, }) {
+    const t = useXTheme();
+    const { width, onLayout } = useChartWidth();
+    const lineColor = color ?? t.colorPrimary;
+    const PAD = { l: 34, r: 12, tt: 14, b: 26 };
+    const innerW = Math.max(0, width - PAD.l - PAD.r);
+    const innerH = Math.max(0, height - PAD.tt - PAD.b);
+    const maxV = Math.max(...data, 1);
+    const n = data.length;
+    /** 数值 → 坐标 */
+    const pt = (i, v) => ({
+        x: n <= 1 ? PAD.l + innerW / 2 : PAD.l + (innerW * i) / (n - 1),
+        y: PAD.tt + innerH - (v / (maxV * 1.1)) * innerH,
+    });
+    const points = data.map((v, i) => pt(i, v));
+    /** 平滑路径：中点三次贝塞尔（视觉平滑且不过冲） */
+    const linePath = (() => {
+        if (points.length === 0)
+            return '';
+        const d = [`M ${points[0].x} ${points[0].y}`];
+        for (let i = 1; i < points.length; i++) {
+            const p0 = points[i - 1];
+            const p1 = points[i];
+            if (smooth) {
+                const mx = (p0.x + p1.x) / 2;
+                d.push(`C ${mx} ${p0.y}, ${mx} ${p1.y}, ${p1.x} ${p1.y}`);
+            }
+            else {
+                d.push(`L ${p1.x} ${p1.y}`);
+            }
+        }
+        return d.join(' ');
+    })();
+    const baselineY = PAD.tt + innerH;
+    const areaPath = points.length
+        ? `${linePath} L ${points[points.length - 1].x} ${baselineY} L ${points[0].x} ${baselineY} Z`
+        : '';
+    const labelStep = Math.ceil((labels?.length ?? 0) / 6);
+    return (_jsx(View, { style: style, onLayout: onLayout, children: width > 0 && (_jsxs(Svg, { width: width, height: height, children: [area && (_jsx(Defs, { children: _jsxs(LinearGradient, { id: 'xLineArea', x1: '0', y1: '0', x2: '0', y2: '1', children: [_jsx(Stop, { offset: '0', stopColor: lineColor, stopOpacity: 0.25 }), _jsx(Stop, { offset: '1', stopColor: lineColor, stopOpacity: 0 })] }) })), Array.from({ length: grid + 1 }, (_, i) => {
+                    const ratio = i / grid;
+                    const y = PAD.tt + innerH * (1 - ratio);
+                    const value = Math.round(maxV * 1.1 * ratio);
+                    return (_jsxs(React.Fragment, { children: [_jsx(Line, { x1: PAD.l, y1: y, x2: width - PAD.r, y2: y, stroke: t.colorSplit, strokeWidth: 1 }), _jsx(SvgText, { x: PAD.l - 6, y: y + 4, fontSize: 10, fill: t.colorTextTertiary, textAnchor: 'end', children: value })] }, i));
+                }), area && areaPath ? _jsx(Path, { d: areaPath, fill: 'url(#xLineArea)' }) : null, _jsx(Path, { d: linePath, fill: 'none', stroke: lineColor, strokeWidth: 2.5, strokeLinecap: 'round' }), points.map((p, i) => (_jsxs(React.Fragment, { children: [_jsx(Circle, { cx: p.x, cy: p.y, r: 3.5, fill: t.colorBgContainer, stroke: lineColor, strokeWidth: 2 }), showValues && (_jsx(SvgText, { x: p.x, y: p.y - 8, fontSize: 10, fill: t.colorTextSecondary, textAnchor: 'middle', children: data[i] }))] }, i))), labels?.map((label, i) => i % labelStep === 0 || i === labels.length - 1 ? (_jsx(SvgText, { x: points[i]?.x ?? 0, y: height - 8, fontSize: 10, fill: t.colorTextTertiary, textAnchor: 'middle', children: label }, i)) : null)] })) }));
+}
+export function XBarChart({ data, height = 220, barWidthRatio = 0.5, showValues = true, grid = 4, style }) {
+    const t = useXTheme();
+    const { width, onLayout } = useChartWidth();
+    const colors = palette(t);
+    const PAD = { l: 34, r: 12, tt: 20, b: 26 };
+    const innerW = Math.max(0, width - PAD.l - PAD.r);
+    const innerH = Math.max(0, height - PAD.tt - PAD.b);
+    const maxV = Math.max(...data.map(d => d.value), 1);
+    const band = data.length ? innerW / data.length : 0;
+    const barW = Math.min(band * barWidthRatio, 40);
+    return (_jsx(View, { style: style, onLayout: onLayout, children: width > 0 && (_jsxs(Svg, { width: width, height: height, children: [Array.from({ length: grid + 1 }, (_, i) => {
+                    const ratio = i / grid;
+                    const y = PAD.tt + innerH * (1 - ratio);
+                    return (_jsxs(React.Fragment, { children: [_jsx(Line, { x1: PAD.l, y1: y, x2: width - PAD.r, y2: y, stroke: t.colorSplit, strokeWidth: 1 }), _jsx(SvgText, { x: PAD.l - 6, y: y + 4, fontSize: 10, fill: t.colorTextTertiary, textAnchor: 'end', children: Math.round(maxV * 1.1 * ratio) })] }, i));
+                }), data.map((item, i) => {
+                    const h = (item.value / (maxV * 1.1)) * innerH;
+                    const x = PAD.l + band * i + (band - barW) / 2;
+                    const y = PAD.tt + innerH - h;
+                    return (_jsxs(React.Fragment, { children: [_jsx(Rect, { x: x, y: y, width: barW, height: Math.max(h, 2), rx: 3, fill: item.color ?? t.colorPrimary }), showValues && (_jsx(SvgText, { x: x + barW / 2, y: y - 6, fontSize: 10, fill: t.colorTextSecondary, textAnchor: 'middle', children: item.value })), _jsx(SvgText, { x: x + barW / 2, y: height - 8, fontSize: 10, fill: t.colorTextTertiary, textAnchor: 'middle', children: item.label })] }, i));
+                })] })) }));
+}
+/** 极坐标 → 直角坐标 */
+const polar = (cx, cy, r, deg) => {
+    const rad = ((deg - 90) * Math.PI) / 180;
+    return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+};
+/** 扇形路径（含 donut 内弧） */
+function slicePath(cx, cy, rOuter, rInner, startDeg, endDeg) {
+    const large = endDeg - startDeg > 180 ? 1 : 0;
+    const p1 = polar(cx, cy, rOuter, startDeg);
+    const p2 = polar(cx, cy, rOuter, endDeg);
+    if (rInner <= 0) {
+        return `M ${cx} ${cy} L ${p1.x} ${p1.y} A ${rOuter} ${rOuter} 0 ${large} 1 ${p2.x} ${p2.y} Z`;
+    }
+    const p3 = polar(cx, cy, rInner, endDeg);
+    const p4 = polar(cx, cy, rInner, startDeg);
+    return `M ${p1.x} ${p1.y} A ${rOuter} ${rOuter} 0 ${large} 1 ${p2.x} ${p2.y} L ${p3.x} ${p3.y} A ${rInner} ${rInner} 0 ${large} 0 ${p4.x} ${p4.y} Z`;
+}
+export function XPieChart({ data, height = 220, donut = true, centerLabel, legend = true, style }) {
+    const t = useXTheme();
+    const { width, onLayout } = useChartWidth();
+    const colors = palette(t);
+    const total = data.reduce((s, d) => s + d.value, 0) || 1;
+    const size = Math.min(width || height, height) - 8;
+    const cx = (width || size) / 2;
+    const cy = height / 2;
+    const rOuter = size / 2;
+    const rInner = donut ? rOuter * 0.62 : 0;
+    /** 求各扇区起止角 */
+    let acc = 0;
+    const slices = data.map((item, i) => {
+        const startDeg = (acc / total) * 360;
+        acc += item.value;
+        const endDeg = (acc / total) * 360;
+        return { ...item, color: item.color ?? colors[i % colors.length], startDeg, endDeg };
+    });
+    return (_jsx(View, { style: style, onLayout: onLayout, children: width > 0 && (_jsxs(_Fragment, { children: [_jsxs(Svg, { width: width, height: height, children: [slices.map((s, i) => (_jsx(Path, { d: slicePath(cx, cy, rOuter, rInner, s.startDeg, s.endDeg), fill: s.color }, i))), donut && centerLabel ? (_jsx(SvgText, { x: cx, y: cy + 5, fontSize: 13, fontWeight: '600', fill: t.colorText, textAnchor: 'middle', children: centerLabel })) : null] }), legend && (_jsx(View, { style: styles.legend, children: slices.map((s, i) => (_jsxs(View, { style: styles.legendItem, children: [_jsx(View, { style: [styles.legendDot, { backgroundColor: s.color }] }), _jsxs(Text, { style: [styles.legendText, { color: t.colorTextSecondary }], children: [s.label, " ", Math.round((s.value / total) * 100), "%"] })] }, i))) }))] })) }));
+}
+const styles = StyleSheet.create({
+    legend: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 10,
+        justifyContent: 'center',
+        marginTop: 10,
+    },
+    legendItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    legendDot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+    },
+    legendText: {
+        fontSize: 12,
+    },
+});
+export default { XLineChart, XBarChart, XPieChart };

package/dist/XCheckbox/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * ============================================================================
+ * XCheckbox —— 对标 antd Checkbox（RN 自实现版）
+ * ============================================================================
+ *
+ * 支持的 antd API：
+ * - <XCheckbox checked defaultChecked indeterminate disabled onChange value>
+ * - <XCheckbox.Group value defaultValue options onChange disabled>
+ *   - value: 选中值数组；onChange(checkedValues: any[])
+ *   - options: {label, value, disabled?}[]
+ *
+ * 与 antd 的差异：
+ * - onChange 的参数是轻量合成事件 {checked, value, target}（antd 是 DOM 事件包装）
+ * - 勾选用 View 边框旋转画出来的（L 形旋转 45°），不依赖图标字体
+ */
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+/** antd Checkbox onChange 事件对象的 RN 等价物 */
+export interface XCheckboxChangeEvent {
+    checked: boolean;
+    value?: any;
+    target: {
+        checked: boolean;
+        value?: any;
+    };
+    stopPropagation: () => void;
+}
+export interface XCheckboxProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    /** 半选态：显示横杠而不是勾（父级全选框常用） */
+    indeterminate?: boolean;
+    disabled?: boolean;
+    /** Group 内用于标识自己的值；独立使用时只是透传给 onChange */
+    value?: any;
+    onChange?: (e: XCheckboxChangeEvent) => void;
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+export declare function XCheckbox({ checked, defaultChecked, indeterminate, disabled, value, onChange, children, style, textStyle, testID, }: XCheckboxProps): React.JSX.Element;
+export declare namespace XCheckbox {
+    var Group: typeof XCheckboxGroup;
+}
+export interface XCheckboxGroupProps {
+    value?: any[];
+    defaultValue?: any[];
+    options?: Array<{
+        label: React.ReactNode;
+        value: any;
+        disabled?: boolean;
+    }>;
+    onChange?: (checkedValues: any[]) => void;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare function XCheckboxGroup(props: XCheckboxGroupProps): React.JSX.Element;
+export default XCheckbox;

package/dist/XCheckbox/index.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XCheckbox —— 对标 antd Checkbox（RN 自实现版）
+ * ============================================================================
+ *
+ * 支持的 antd API：
+ * - <XCheckbox checked defaultChecked indeterminate disabled onChange value>
+ * - <XCheckbox.Group value defaultValue options onChange disabled>
+ *   - value: 选中值数组；onChange(checkedValues: any[])
+ *   - options: {label, value, disabled?}[]
+ *
+ * 与 antd 的差异：
+ * - onChange 的参数是轻量合成事件 {checked, value, target}（antd 是 DOM 事件包装）
+ * - 勾选用 View 边框旋转画出来的（L 形旋转 45°），不依赖图标字体
+ */
+import { createContext, useContext, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, View, Text } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { useXTheme, xTheme } from '../theme';
+const CheckboxGroupContext = createContext(null);
+export function XCheckbox({ checked, defaultChecked, indeterminate = false, disabled, value, onChange, children, style, textStyle, testID, }) {
+    const t = useXTheme();
+    const group = useContext(CheckboxGroupContext);
+    const [innerChecked, setInnerChecked] = useState(!!defaultChecked);
+    const inGroupWithValue = group && value !== undefined;
+    const isChecked = inGroupWithValue ? group.isChecked(value) : checked ?? innerChecked;
+    const isDisabled = disabled || (group?.disabled ?? false);
+    const handlePress = () => {
+        if (isDisabled)
+            return;
+        const next = !isChecked;
+        if (inGroupWithValue) {
+            group.toggle(value);
+        }
+        else {
+            setInnerChecked(next);
+        }
+        onChange?.({
+            checked: next,
+            value,
+            target: { checked: next, value },
+            stopPropagation: () => { },
+        });
+    };
+    return (_jsxs(Pressable, { testID: testID, onPress: handlePress, disabled: isDisabled, style: ({ pressed }) => [styles.row, pressed && !isDisabled && styles.pressed, style], children: [_jsx(XCheckboxIndicator, { checked: isChecked, indeterminate: indeterminate, disabled: isDisabled }), children != null && (_jsx(Text, { style: [styles.label, { color: isDisabled ? t.colorTextQuaternary : t.colorText }, textStyle], allowFontScaling: false, children: children }))] }));
+}
+/**
+ * 方框指示器：20x20 圆角方框；选中画 SVG 勾（几何精确、居中且不裁切），
+ * 半选画主色横杠。
+ * 勾用 react-native-svg 的 Path 画，不用 View 旋转拼装的近似画法——
+ * 那种画法旋转后的视觉包围盒超出布局盒，会出现勾显示不全的问题。
+ */
+function XCheckboxIndicator({ checked, indeterminate, disabled }) {
+    const t = useXTheme();
+    const active = checked || indeterminate;
+    // 底色：选中/半选用主色（禁用时用禁用灰），否则透明白底
+    const bgColor = disabled
+        ? active
+            ? t.colorBgContainerDisabled
+            : t.colorBgContainer
+        : active
+            ? t.colorPrimary
+            : t.colorBgContainer;
+    const borderColor = disabled ? t.colorBorder : active ? t.colorPrimary : t.colorBorder;
+    // 禁用时勾用灰色（白勾在禁用浅灰底上看不见）
+    const checkColor = disabled ? t.colorTextQuaternary : t.colorTextLightSolid;
+    return (_jsxs(View, { style: [styles.box, { backgroundColor: bgColor, borderColor }], children: [checked && !indeterminate && (_jsx(Svg, { width: 12, height: 12, viewBox: '0 0 12 12', children: _jsx(Path, { d: 'M2 6.5 L4.8 9.2 L10 3', stroke: checkColor, strokeWidth: 2, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' }) })), indeterminate && !checked && _jsx(View, { style: [styles.dash, { backgroundColor: disabled ? t.colorTextQuaternary : t.colorPrimary }] })] }));
+}
+function XCheckboxGroup(props) {
+    const { value, defaultValue, options, onChange, disabled, children, style, testID } = props;
+    const [innerValue, setInnerValue] = useState(defaultValue ?? []);
+    const currentValue = value !== undefined ? value : innerValue;
+    const toggle = (v) => {
+        const next = currentValue.includes(v) ? currentValue.filter(item => item !== v) : [...currentValue, v];
+        if (value === undefined) {
+            setInnerValue(next);
+        }
+        onChange?.(next);
+    };
+    const ctx = useMemo(() => ({
+        value: currentValue,
+        disabled,
+        toggle,
+        isChecked: (v) => currentValue.includes(v),
+    }), [currentValue, disabled, value, onChange]);
+    return (_jsx(CheckboxGroupContext.Provider, { value: ctx, children: _jsx(View, { testID: testID, style: [styles.group, style], children: options
+                ? options.map(opt => (_jsx(XCheckbox, { value: opt.value, disabled: opt.disabled, children: opt.label }, String(opt.value))))
+                : children }) }));
+}
+XCheckbox.Group = XCheckboxGroup;
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 8, // 扩大点击热区
+        alignSelf: 'flex-start',
+    },
+    pressed: {
+        opacity: 0.7,
+    },
+    box: {
+        width: 20,
+        height: 20,
+        borderRadius: 4,
+        borderWidth: 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    /** 半选横杠（antd 半选是主色短横线） */
+    dash: {
+        width: 10,
+        height: 2,
+        borderRadius: 1,
+    },
+    label: {
+        fontSize: xTheme.fontSize,
+        marginLeft: 8,
+    },
+    group: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        rowGap: 4,
+        columnGap: 16,
+    },
+});
+export default XCheckbox;

package/dist/XConfirmForm/index.d.ts

@@ -0,0 +1,69 @@
+/**
+ * ============================================================================
+ * 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 React from 'react';
+/** show 时的配置 */
+export interface XConfirmFormOptions {
+    title?: string;
+    /** 提示内容：字符串或任意 ReactNode（可以放表单组件） */
+    content?: React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    /** 危险操作：内容下方显示红色警示文案 */
+    danger?: boolean;
+}
+/** 宿主实例暴露给 Service 的接口 */
+interface ConfirmFormHandle {
+    show: (options: XConfirmFormOptions) => Promise<boolean>;
+    hide: (result?: boolean) => void;
+}
+/**
+ * XConfirmFormComponent —— 常驻的确认框实例
+ * 本身也是一个"受控的 XModalForm"：visible 由内部状态控制。
+ */
+export declare const XConfirmFormComponent: () => React.JSX.Element;
+export declare const XConfirmFormService: {
+    /** 由 XConfirmFormComponent 挂载/卸载时调用 */
+    _setHost: (h: ConfirmFormHandle | null) => void;
+    show: (options: XConfirmFormOptions) => Promise<boolean>;
+    hide: () => void | undefined;
+};
+/**
+ * 对外导出的"组件 + 静态方法"：
+ * - <XConfirmForm />（XPopupProvider 里用的就是它）
+ * - XConfirmForm.show({...}) / XConfirmForm.hide()
+ * Object.assign 把静态方法挂到函数组件上。
+ */
+export declare const XConfirmForm: (() => React.JSX.Element) & {
+    show: (options: XConfirmFormOptions) => Promise<boolean>;
+    hide: () => void | undefined;
+};
+/** 保留 duxui 的 confirm 命名风格：confirm({...}) 等价 XConfirmForm.show({...}) */
+export declare const confirm: (options: XConfirmFormOptions) => Promise<boolean>;
+export {};