react-native-x-components 0.1.0 → 0.2.0

package/dist/XTheme/ThemeControls.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useXTheme, useXThemeMode, setXThemeMode } from '../theme';
+import { useXBrandStore, setXBrandByName, X_BRAND_PRESETS } from './BrandColor';
+import { useXLocale, setXLocale } from '../XLocale';
+/**
+ * 暗黑切换：三态循环 📱跟随系统 → 🌙暗 → ☀️亮 → 📱。
+ * 用户点过两态按钮会永久脱离系统跟随（bug 根因），三态保证能回到"自动"。
+ */
+function ThemeModeButton({ compact }) {
+    const t = useXTheme();
+    const mode = useXThemeMode();
+    const next = mode === 'system' ? 'dark' : mode === 'dark' ? 'light' : 'system';
+    return (_jsx(Pressable, { onPress: () => setXThemeMode(next), hitSlop: 8, style: ({ pressed }) => [
+            compact ? styles.btnCompact : styles.btn,
+            { borderColor: t.colorBorder, backgroundColor: pressed ? t.colorBgLayout : 'transparent' },
+        ], children: _jsx(Text, { style: [compact ? styles.icon : styles.iconBig, { color: t.colorText }], children: mode === 'system' ? '📱' : mode === 'dark' ? '🌙' : '☀️' }) }));
+}
+/** 主题色循环切换：4 套预设品牌色 */
+function BrandColorButton({ compact }) {
+    const t = useXTheme();
+    const brand = useXBrandStore(s => s.brand);
+    return (_jsx(Pressable, { onPress: () => {
+            const idx = X_BRAND_PRESETS.findIndex(p => p.name === brand.name);
+            const next = X_BRAND_PRESETS[(idx + 1) % X_BRAND_PRESETS.length];
+            setXBrandByName(next.name);
+        }, hitSlop: 8, style: ({ pressed }) => [
+            compact ? styles.btnCompact : styles.btn,
+            { borderColor: t.colorBorder, backgroundColor: pressed ? t.colorBgLayout : 'transparent' },
+        ], children: _jsx(View, { style: {
+                width: compact ? 14 : 18,
+                height: compact ? 14 : 18,
+                borderRadius: compact ? 7 : 9,
+                backgroundColor: brand.primary,
+            } }) }));
+}
+/** 语言切换：中 ↔ 英 */
+function LocaleButton({ compact }) {
+    const t = useXTheme();
+    const { locale } = useXLocale();
+    const next = locale === 'zh-CN' ? 'en-US' : 'zh-CN';
+    return (_jsx(Pressable, { onPress: () => setXLocale(next), hitSlop: 8, style: ({ pressed }) => [
+            compact ? styles.btnCompact : styles.btn,
+            { borderColor: t.colorBorder, backgroundColor: pressed ? t.colorBgLayout : 'transparent' },
+        ], children: _jsx(Text, { style: [compact ? styles.icon : styles.iconBig, { color: t.colorText, fontWeight: '600' }], children: locale === 'zh-CN' ? 'EN' : '中' }) }));
+}
+/** 三个按钮组合 */
+export function ThemeControls({ compact, style }) {
+    return (_jsxs(View, { style: [compact ? styles.rowCompact : styles.row, compact && styles.rowFlex], children: [_jsx(ThemeModeButton, { compact: compact }), _jsx(BrandColorButton, { compact: compact }), _jsx(LocaleButton, { compact: compact })] }));
+}
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        gap: 10,
+        alignItems: 'center',
+    },
+    rowCompact: {
+        flexDirection: 'row',
+        gap: 6,
+        alignItems: 'center',
+    },
+    rowFlex: {
+        flex: 1,
+    },
+    btn: {
+        width: 44,
+        height: 36,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    btnCompact: {
+        width: 32,
+        height: 32,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    icon: {
+        fontSize: 14,
+    },
+    iconBig: {
+        fontSize: 16,
+    },
+});
+export default ThemeControls;

package/dist/XUpload/XUploadImage.js

@@ -13,11 +13,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ============================================================================
  */
 import { useCallback, useRef, useState } from 'react';
-import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Alert, Image, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useXTheme } from '../theme';
 import { useXLocale } from '../XLocale';
 import { useXUploadAdapter } from './provider';
-import { compressImage, pickImageFiles } from './helpers';
+import { showXActionSheet } from '../XActionSheet/global';
+import { XConfirmForm } from '../XConfirmForm';
+import { XImagePreviewService } from '../XProviders';
+import { compressImage, pickImageFiles, takePicture } from './helpers';
 const CELL_GAP = 8;
 export function XUploadImage({ value, onChange, max = 9, compress = true, compressWidth = 1280, quality = 0.6, disabled = false, columns = 3, adapter: localAdapter, onItemPress, style, }) {
     const t = useXTheme();
@@ -38,14 +41,32 @@ export function XUploadImage({ value, onChange, max = 9, compress = true, compre
         setInner(next);
         onChange?.(next);
     }, [onChange]);
-    /** 加号：选图 → 逐张压缩上传（串行，进度独立展示） */
+    /**
+     * 加号：弹 ActionSheet（拍照/相册/取消），再选 → 压缩 → 串行上传
+     */
     const handleAdd = useCallback(async () => {
         if (disabled || tasks.length)
             return;
         const remaining = max - currentRef.current.length;
         if (remaining <= 0)
             return;
-        const picked = await pickImageFiles({ max: remaining, quality: 0.9 });
+        const source = await showXActionSheet({
+            title: '选择图片来源',
+            options: [
+                { label: '📷  拍照', value: 'camera' },
+                { label: '🖼️  从相册选择', value: 'album' },
+                { label: '取消', value: null },
+            ],
+        });
+        let picked = [];
+        if (source === 'camera') {
+            const file = await takePicture({ quality: 0.9 });
+            if (file)
+                picked = [file];
+        }
+        else if (source === 'album') {
+            picked = await pickImageFiles({ max: remaining, quality: 0.9 });
+        }
         for (const raw of picked) {
             if (currentRef.current.length >= max)
                 break;
@@ -60,15 +81,24 @@ export function XUploadImage({ value, onChange, max = 9, compress = true, compre
             }
             catch (e) {
                 console.warn('[XUploadImage] upload failed:', e);
+                Alert.alert('上传失败', String(e.message ?? e));
             }
             finally {
                 setTasks(prev => prev.filter(task => task.id !== taskId));
             }
         }
     }, [disabled, max, tasks.length, compress, compressWidth, quality, adapter, emit]);
-    /** 删除 */
+    /** 删除：先弹命令式确认框，确认后才删 */
     const handleRemove = useCallback((index) => {
-        emit(currentRef.current.filter((_, i) => i !== index));
+        XConfirmForm.show({
+            title: '删除图片',
+            content: '确定要删除这张图片吗？',
+            confirmText: '删除',
+            danger: true,
+        }).then(ok => {
+            if (ok)
+                emit(currentRef.current.filter((_, i) => i !== index));
+        });
     }, [emit]);
     const handleLayout = useCallback((e) => {
         setGridWidth(e.nativeEvent.layout.width);
@@ -76,16 +106,28 @@ export function XUploadImage({ value, onChange, max = 9, compress = true, compre
     /** 精确列宽：容器宽 - 间隙后均分 */
     const cellWidth = gridWidth > 0 ? (gridWidth - CELL_GAP * (columns - 1)) / columns : undefined;
     const showAdd = !disabled && items.length + tasks.length < max;
-    return (_jsxs(View, { style: [styles.grid, style], onLayout: handleLayout, children: [items.map((item, index) => (_jsxs(View, { style: [styles.cell, { borderRadius: t.borderRadius, borderColor: t.colorSplit, width: cellWidth }], children: [_jsx(Pressable, { style: styles.cellInner, onPress: () => onItemPress?.(item, index), children: _jsx(Image, { source: { uri: item.url ?? item.uri }, style: styles.image, resizeMode: 'cover' }) }), !disabled && (_jsx(Pressable, { style: styles.remove, onPress: () => handleRemove(index), hitSlop: 6, children: _jsx(Text, { style: styles.removeText, allowFontScaling: false, children: "\u2715" }) }))] }, `${item.objectKey ?? item.url ?? index}`))), tasks.map(task => (_jsx(View, { style: [
+    return (_jsxs(View, { style: [styles.grid, style], onLayout: handleLayout, children: [items.map((item, index) => (_jsxs(View, { style: [styles.cell, { borderRadius: t.borderRadius, borderColor: t.colorSplit, width: cellWidth }], children: [_jsx(Pressable, { style: styles.cellInner, onPress: () => {
+                            // 默认调用内置 XImagePreviewService 预览；也可通过 onItemPress 覆盖
+                            if (onItemPress) {
+                                onItemPress(item, index);
+                            }
+                            else {
+                                const urls = items
+                                    .map(it => it?.url ?? it.uri)
+                                    .filter(Boolean);
+                                const initialIndex = index;
+                                XImagePreviewService.show({ images: urls, initialIndex });
+                            }
+                        }, children: _jsx(Image, { source: { uri: item.url ?? item.uri }, style: styles.image, resizeMode: 'cover' }) }), !disabled && (_jsx(Pressable, { style: styles.remove, onPress: () => handleRemove(index), hitSlop: 6, children: _jsx(Text, { style: styles.removeText, allowFontScaling: false, children: "\u2715" }) }))] }, `${item.objectKey ?? item.url ?? index}`))), tasks.map(task => (_jsx(View, { style: [
                     styles.cell,
                     styles.uploadingCell,
                     { borderRadius: t.borderRadius, borderColor: t.colorSplit, backgroundColor: t.colorBgLayout, width: cellWidth },
-                ], children: _jsx(Text, { style: [styles.progressText, { color: t.colorPrimary }], allowFontScaling: false, children: i18n('uploadingPercent', { n: task.progress }) }) }, task.id))), showAdd && (_jsx(Pressable, { onPress: handleAdd, style: ({ pressed }) => [
+                ], children: _jsx(View, { style: styles.cellCenter, children: _jsx(Text, { style: [styles.progressText, { color: t.colorPrimary }], allowFontScaling: false, children: i18n('uploadingPercent', { n: task.progress }) }) }) }, task.id))), showAdd && (_jsx(Pressable, { onPress: handleAdd, style: ({ pressed }) => [
                     styles.cell,
                     styles.addCell,
                     { borderRadius: t.borderRadius, borderColor: t.colorBorder, width: cellWidth },
                     pressed && { backgroundColor: t.colorBgLayout },
-                ], children: _jsx(Text, { style: [styles.addText, { color: t.colorTextTertiary }], allowFontScaling: false, children: "\uFF0B" }) }))] }));
+                ], children: _jsx(View, { style: styles.cellCenter, children: _jsx(Text, { style: [styles.addText, { color: t.colorTextTertiary }], allowFontScaling: false, children: "\uFF0B" }) }) }))] }));
 }
 const styles = StyleSheet.create({
     grid: {
@@ -125,14 +167,18 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
     },
+    /** 单元格内容统一用 flex:1 居中容器（修复安卓上加号仅水平居中问题） */
+    cellCenter: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
     progressText: {
         fontSize: 12,
         fontWeight: '600',
     },
     addCell: {
         borderStyle: 'dashed',
-        alignItems: 'center',
-        justifyContent: 'center',
     },
     addText: {
         fontSize: 26,

package/dist/XUpload/XUploadVideo.js

@@ -12,7 +12,9 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { useXTheme } from '../theme';
 import { useXLocale } from '../XLocale';
 import { useXUploadAdapter } from './provider';
-import { pickVideoFile } from './helpers';
+import { showXActionSheet } from '../XActionSheet/global';
+import { pickVideoFile, takeVideo } from './helpers';
+import { XVideoPreview } from '../XVideoPreview';
 export function XUploadVideo({ value, onChange, videoMaxDuration = 60, disabled = false, adapter: localAdapter, style, }) {
     const t = useXTheme();
     const { t: i18n } = useXLocale();
@@ -21,16 +23,32 @@ export function XUploadVideo({ value, onChange, videoMaxDuration = 60, disabled
     const current = value !== undefined ? value : inner;
     const [progress, setProgress] = useState(null);
     const [failed, setFailed] = useState(false);
+    /** 视频预览弹层 */
+    const [previewUri, setPreviewUri] = useState(null);
     const emit = useCallback((item) => {
         setInner(item);
         onChange?.(item);
     }, [onChange]);
-    /** 选择视频 → 上传 */
+    /** 弹 ActionSheet → 拍照 / 相册 → 上传 */
     const handlePick = useCallback(async () => {
         if (disabled || progress !== null)
             return;
         setFailed(false);
-        const file = await pickVideoFile({ videoMaxDuration });
+        const source = await showXActionSheet({
+            title: '选择视频来源',
+            options: [
+                { label: '🎥  拍视频', value: 'camera' },
+                { label: '🎞️  从相册选择', value: 'album' },
+                { label: '取消', value: null },
+            ],
+        });
+        let file = null;
+        if (source === 'camera') {
+            file = await takeVideo({ videoMaxDuration });
+        }
+        else if (source === 'album') {
+            file = await pickVideoFile({ videoMaxDuration });
+        }
         if (!file)
             return;
         setProgress(0);
@@ -46,11 +64,11 @@ export function XUploadVideo({ value, onChange, videoMaxDuration = 60, disabled
             setProgress(null);
         }
     }, [disabled, progress, videoMaxDuration, adapter, emit]);
-    return (_jsx(View, { style: style, children: current ? (_jsxs(View, { style: [styles.resultBox, { borderColor: t.colorSplit, backgroundColor: t.colorBgLayout, borderRadius: t.borderRadius }], children: [_jsxs(Text, { numberOfLines: 1, style: [styles.resultText, { color: t.colorText }], children: ["\uD83C\uDFAC ", String(current.url ?? current.objectKey ?? '视频')] }), !disabled && (_jsx(Pressable, { onPress: () => emit(null), hitSlop: 6, children: _jsx(Text, { style: [styles.removeText, { color: t.colorError }], children: i18n('delete') }) }))] })) : (_jsx(Pressable, { onPress: handlePick, disabled: disabled, style: ({ pressed }) => [
-                styles.pickBox,
-                { borderColor: t.colorBorder, borderRadius: t.borderRadius },
-                pressed && { backgroundColor: t.colorBgLayout },
-            ], children: progress !== null ? (_jsx(Text, { style: [styles.pickText, { color: t.colorPrimary }], allowFontScaling: false, children: i18n('uploadingPercent', { n: progress }) })) : (_jsx(Text, { style: [styles.pickText, { color: failed ? t.colorError : t.colorTextSecondary }], allowFontScaling: false, children: failed ? `${i18n('uploadFailed')} · ${i18n('retry')}` : i18n('pleaseSelect') })) })) }));
+    return (_jsxs(View, { style: style, children: [current ? (_jsxs(Pressable, { onPress: () => setPreviewUri(current.url ?? current.uri ?? null), style: [styles.resultBox, { borderColor: t.colorSplit, backgroundColor: t.colorBgLayout, borderRadius: t.borderRadius }], children: [_jsxs(Text, { numberOfLines: 1, style: [styles.resultText, { color: t.colorText }], children: ["\uD83C\uDFAC ", String(current.url ?? current.objectKey ?? '视频')] }), !disabled && (_jsx(Pressable, { hitSlop: 6, onPress: () => emit(null), style: styles.deleteBtn, children: _jsx(Text, { style: [styles.removeText, { color: t.colorError }], children: i18n('delete') }) }))] })) : (_jsx(Pressable, { onPress: handlePick, disabled: disabled, style: ({ pressed }) => [
+                    styles.pickBox,
+                    { borderColor: t.colorBorder, borderRadius: t.borderRadius },
+                    pressed && { backgroundColor: t.colorBgLayout },
+                ], children: progress !== null ? (_jsx(Text, { style: [styles.pickText, { color: t.colorPrimary }], allowFontScaling: false, children: i18n('uploadingPercent', { n: progress }) })) : (_jsx(Text, { style: [styles.pickText, { color: failed ? t.colorError : t.colorTextSecondary }], allowFontScaling: false, children: failed ? `${i18n('uploadFailed')} · ${i18n('retry')}` : i18n('pleaseSelect') })) })), _jsx(XVideoPreview, { visible: !!previewUri, uri: previewUri ?? '', onClose: () => setPreviewUri(null) })] }));
 }
 const styles = StyleSheet.create({
     resultBox: {
@@ -69,6 +87,9 @@ const styles = StyleSheet.create({
     removeText: {
         fontSize: 13,
     },
+    deleteBtn: {
+        paddingHorizontal: 4,
+    },
     pickBox: {
         height: 64,
         borderWidth: StyleSheet.hairlineWidth,

package/dist/XUpload/helpers.d.ts

@@ -9,6 +9,14 @@
  * ============================================================================
  */
 import type { XUploadAdapter, XUploadFile, XUploadResult } from './types';
+/** 拍照 */
+export declare function takePicture(options?: {
+    quality?: number;
+}): Promise<XUploadFile | null>;
+/** 拍视频 */
+export declare function takeVideo(options?: {
+    videoMaxDuration?: number;
+}): Promise<XUploadFile | null>;
 /** 选图（可多选），返回本机文件列表 */
 export declare function pickImageFiles(options?: {
     /** 最多可选，默认 9 */

package/dist/XUpload/helpers.js

@@ -21,6 +21,29 @@ function toUploadFile(asset) {
         size: asset.fileSize ?? undefined,
     };
 }
+/** 拍照 */
+export async function takePicture(options) {
+    // 拍照权限（Android 自动授予，iOS 第一次会弹）
+    await ImagePicker.requestCameraPermissionsAsync();
+    const res = await ImagePicker.launchCameraAsync({
+        mediaTypes: ['images'],
+        quality: options?.quality ?? 0.9,
+    });
+    if (res.canceled || !res.assets.length)
+        return null;
+    return toUploadFile(res.assets[0]);
+}
+/** 拍视频 */
+export async function takeVideo(options) {
+    await ImagePicker.requestCameraPermissionsAsync();
+    const res = await ImagePicker.launchCameraAsync({
+        mediaTypes: ['videos'],
+        videoMaxDuration: options?.videoMaxDuration ?? 60,
+    });
+    if (res.canceled || !res.assets.length)
+        return null;
+    return toUploadFile(res.assets[0]);
+}
 /** 选图（可多选），返回本机文件列表 */
 export async function pickImageFiles(options) {
     const res = await ImagePicker.launchImageLibraryAsync({

package/dist/XUpload/index.d.ts

@@ -5,7 +5,7 @@ export type { XUploadAdapter, XUploadFile, XUploadResult } from './types';
 export { createMinioPresignedAdapter, createFormDataUploadAdapter, createMockUploadAdapter } from './adapters';
 export type { MinioPresignedAdapterOptions, FormDataAdapterOptions } from './adapters';
 export { XUploadProvider, setXUploadAdapter, getXUploadAdapter, useXUploadAdapter, createMinioAdapter } from './provider';
-export { pickImageFiles, pickVideoFile, compressImage, uploadBase64 } from './helpers';
+export { pickImageFiles, pickVideoFile, compressImage, uploadBase64, takePicture, takeVideo } from './helpers';
 export { XUploadImage } from './XUploadImage';
 export type { XUploadImageProps } from './XUploadImage';
 export { XUploadVideo } from './XUploadVideo';

package/dist/XUpload/index.js

@@ -1,5 +1,5 @@
 export { createMinioPresignedAdapter, createFormDataUploadAdapter, createMockUploadAdapter } from './adapters';
 export { XUploadProvider, setXUploadAdapter, getXUploadAdapter, useXUploadAdapter, createMinioAdapter } from './provider';
-export { pickImageFiles, pickVideoFile, compressImage, uploadBase64 } from './helpers';
+export { pickImageFiles, pickVideoFile, compressImage, uploadBase64, takePicture, takeVideo } from './helpers';
 export { XUploadImage } from './XUploadImage';
 export { XUploadVideo } from './XUploadVideo';

package/dist/XVideoPreview/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ============================================================================
+ * XVideoPreview —— 视频全屏预览（基于 expo-video + XPullView 居中弹层）
+ * ============================================================================
+ * 用法：受控组件
+ *   <XVideoPreview visible={visible} onClose={...} uri="..." />
+ * XUploadVideo 内部直接复用。
+ * ============================================================================
+ */
+import React from 'react';
+export interface XVideoPreviewProps {
+    visible: boolean;
+    onClose: () => void;
+    uri: string;
+}
+export declare function XVideoPreview({ visible, onClose, uri }: XVideoPreviewProps): React.JSX.Element;
+export default XVideoPreview;

package/dist/XVideoPreview/index.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XVideoPreview —— 视频全屏预览（基于 expo-video + XPullView 居中弹层）
+ * ============================================================================
+ * 用法：受控组件
+ *   <XVideoPreview visible={visible} onClose={...} uri="..." />
+ * XUploadVideo 内部直接复用。
+ * ============================================================================
+ */
+import { useEffect } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useVideoPlayer, VideoView } from 'expo-video';
+import { XPullView } from '../XPullView';
+export function XVideoPreview({ visible, onClose, uri }) {
+    const player = useVideoPlayer(uri, p => {
+        p.loop = false;
+        p.play();
+    });
+    // 关闭时停止播放 + 卸载时清理
+    useEffect(() => {
+        return () => {
+            try {
+                player?.pause();
+            }
+            catch {
+                /* noop */
+            }
+        };
+    }, [player]);
+    // 每次打开自动播放
+    useEffect(() => {
+        if (visible && player) {
+            try {
+                player.play();
+            }
+            catch {
+                /* noop */
+            }
+        }
+        else if (!visible && player) {
+            try {
+                player.pause();
+            }
+            catch {
+                /* noop */
+            }
+        }
+    }, [visible, player]);
+    return (_jsx(XPullView, { visible: visible, onClose: onClose, side: 'center', overlayOpacity: 0.85, mask: true, children: _jsxs(View, { style: styles.overlay, children: [_jsx(VideoView, { player: player, style: StyleSheet.absoluteFill, contentFit: 'contain', nativeControls: true }), _jsx(Pressable, { onPress: onClose, hitSlop: 12, style: styles.close, children: _jsx(Text, { style: styles.closeText, children: "\u2715" }) })] }) }));
+}
+const styles = StyleSheet.create({
+    overlay: {
+        width: '100%',
+        aspectRatio: 16 / 9,
+        maxHeight: '80%',
+        backgroundColor: '#000',
+        overflow: 'hidden',
+        borderRadius: 12,
+    },
+    close: {
+        position: 'absolute',
+        top: 12,
+        right: 12,
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+    closeText: {
+        color: '#fff',
+        fontSize: 18,
+        fontWeight: '600',
+    },
+});
+export default XVideoPreview;

package/dist/index.d.ts

@@ -90,8 +90,6 @@ export { XCarousel } from './XCarousel';
 export type { XCarouselProps, XCarouselItem } from './XCarousel';
 export { XTabs, XTabPane } from './XTabs';
 export type { XTabsProps, XTabPaneProps } from './XTabs';
-export { XElevator } from './XElevator';
-export type { XElevatorProps, XElevatorSection } from './XElevator';
 export { default as XDropdownMenu, XDropdownMenuItem } from './XDropdownMenu';
 export type { XDropdownMenuProps, XDropdownMenuItemProps, XMenuOption } from './XDropdownMenu';
 export { XCalendar } from './XCalendar';
@@ -111,3 +109,8 @@ export type { XSignatureProps } from './XSignature';
 export { XSignatureSkia } from './XSignature/XSignatureSkia';
 export type { XSignatureSkiaProps, XSignatureSkiaValue, XSignatureCharacter, XSignatureStroke, } from './XSignature/XSignatureSkia';
 export * from './XUpload';
+export { ThemeControls } from './XTheme/ThemeControls';
+export { useXBrandStore, setXBrand, setXBrandByName, X_BRAND_PRESETS } from './XTheme/BrandColor';
+export type { XBrandPreset } from './XTheme/BrandColor';
+export { XVideoPreview } from './XVideoPreview';
+export type { XVideoPreviewProps } from './XVideoPreview';

package/dist/index.js

@@ -90,7 +90,7 @@ export { useXLocale, setXLocale, getXLocale, xT, xMonthTitle, X_WEEKDAYS } from
 // ---------------------------------------------------------------------------
 export { XCarousel } from './XCarousel';
 export { XTabs, XTabPane } from './XTabs';
-export { XElevator } from './XElevator';
+// XElevator 已废弃（实现质量不达标，代码保留在 src/_deprecated/），不再导出/发布
 // ---------------------------------------------------------------------------
 // 下拉菜单
 // ---------------------------------------------------------------------------
@@ -125,3 +125,12 @@ export { XSignatureSkia } from './XSignature/XSignatureSkia';
 // 上传（适配器模式：普通 multipart + MinIO 预签名直传）
 // ---------------------------------------------------------------------------
 export * from './XUpload';
+// ---------------------------------------------------------------------------
+// 主题色 + 全局主题控件
+// ---------------------------------------------------------------------------
+export { ThemeControls } from './XTheme/ThemeControls';
+export { useXBrandStore, setXBrand, setXBrandByName, X_BRAND_PRESETS } from './XTheme/BrandColor';
+// ---------------------------------------------------------------------------
+// 视频预览
+// ---------------------------------------------------------------------------
+export { XVideoPreview } from './XVideoPreview';

package/dist/theme.d.ts

@@ -150,14 +150,6 @@ export declare function setXThemeMode(mode: XThemeMode): void;
 export declare function getXThemeMode(): XThemeMode;
 /** 订阅当前模式（React 组件里用） */
 export declare function useXThemeMode(): XThemeMode;
-/**
- * 【核心 Hook】当前模式下的完整 token 集。
- *
- * - 返回值是模块级常量对象（lightTokens / darkTokens），
- *   引用稳定、不会触发无谓重渲染；模式切换时组件自然重渲染取到新对象；
- * - 解析规则：mode==='system' 时跟随 useColorScheme()，
- *   否则用强制值（未挂 Provider 也能工作，状态全局单例）。
- */
 export declare function useXTheme(): XTheme;
 /** 当前实际生效的明暗方案（isDark 便捷判断用） */
 export declare function useXThemeScheme(): XThemeScheme;

package/dist/theme.js

@@ -95,7 +95,7 @@ export const darkTokens = {
     colorTextQuaternary: 'rgba(255, 255, 255, 0.25)',
     colorTextLightSolid: '#FFFFFF',
     colorBorder: 'rgba(255, 255, 255, 0.22)',
-    colorSplit: 'rgba(255, 255, 255, 0.08)',
+    colorSplit: 'rgba(255, 255, 255, 0.15)',
     colorProgressTrack: 'rgba(255, 255, 255, 0.12)',
     colorBgContainer: '#212225',
     colorBgLayout: '#000000',
@@ -142,16 +142,32 @@ export function useXThemeMode() {
 /**
  * 【核心 Hook】当前模式下的完整 token 集。
  *
- * - 返回值是模块级常量对象（lightTokens / darkTokens），
- *   引用稳定、不会触发无谓重渲染；模式切换时组件自然重渲染取到新对象；
- * - 解析规则：mode==='system' 时跟随 useColorScheme()，
- *   否则用强制值（未挂 Provider 也能工作，状态全局单例）。
+ * - 返回值按 (scheme × 品牌色) 缓存，**引用稳定**：同组合永远返回同一对象，
+ *   避免每次渲染新对象导致订阅组件级联重渲染（曾引发日历连点卡顿）；
+ * - mode==='system' 时跟随 useColorScheme()，否则用强制值；
+ * - 注入运行时品牌色（zustand XBrand）覆盖 colorPrimary 等键。
  */
+import { useXBrandStore } from './XTheme/BrandColor';
+const themeCache = new Map();
 export function useXTheme() {
     const mode = useXThemeModeStore(s => s.mode);
     const systemScheme = useColorScheme();
     const scheme = mode === 'system' ? (systemScheme === 'dark' ? 'dark' : 'light') : mode;
-    return scheme === 'dark' ? darkTokens : lightTokens;
+    const brand = useXBrandStore(s => s.brand);
+    const key = `${scheme}:${brand.name}`;
+    let cached = themeCache.get(key);
+    if (!cached) {
+        const base = scheme === 'dark' ? darkTokens : lightTokens;
+        cached = {
+            ...base,
+            colorPrimary: scheme === 'dark' ? brand.primaryDark : brand.primary,
+            colorPrimaryActive: scheme === 'dark' ? brand.primaryDark : brand.primary,
+            colorPrimaryBg: brand.primaryBg,
+            colorPrimaryDisabled: scheme === 'dark' ? 'rgba(255,255,255,0.18)' : 'rgba(32,128,240,0.28)',
+        };
+        themeCache.set(key, cached);
+    }
+    return cached;
 }
 /** 当前实际生效的明暗方案（isDark 便捷判断用） */
 export function useXThemeScheme() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-x-components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Ant Design 风格的 React Native (Expo) 组件库：表单/弹层(TopView)/日历/Skia逐字签名/上传适配器(MinIO预签名)/轻量图表，内置暗黑模式与中英双语。",
   "main": "dist/index.js",
   "react-native": "dist/index.js",
@@ -40,7 +40,8 @@
     "react-native": ">=0.74.0",
     "react-native-reanimated": ">=3.17.0",
     "react-native-safe-area-context": ">=4.0.0",
-    "react-native-svg": ">=14.0.0"
+    "react-native-svg": ">=14.0.0",
+    "react-native-gesture-handler": ">=2.0.0"
   },
   "peerDependenciesMeta": {
     "@shopify/react-native-skia": {
@@ -61,9 +62,6 @@
     "expo-image-picker": {
       "optional": true
     },
-    "react-native-gesture-handler": {
-      "optional": true
-    },
     "react-native-linear-gradient": {
       "optional": true
     },

package/dist/XElevator/index.d.ts

@@ -1,52 +0,0 @@
-/**
- * ============================================================================
- * 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;