react-native-x-components 0.1.0

package/dist/theme.d.ts

@@ -0,0 +1,164 @@
+/**
+ * ============================================================================
+ * X-Components 共享设计 token（对标 antd v5 design token，取值做 RN 适配）
+ * ============================================================================
+ *
+ * 【v2：暗黑模式】
+ * - 本文件现在维护两套完整 token：lightTokens / darkTokens，键完全一致；
+ * - 组件统一用 useXTheme() 取当前模式的 token（跟随系统 + 可强制覆盖），
+ *   旧代码里的 `import {xTheme} from '../theme'` 仍然有效（xTheme === lightTokens），
+ *   但只有走 useXTheme() 才能获得暗黑适配；
+ * - 尺寸类 token（圆角/字号/高度/时长）两种模式共用一套值，只有颜色不同。
+ *
+ * 【切换模式】
+ * - setXThemeMode('light' | 'dark' | 'system')，全局生效（zustand）；
+ * - 默认 'system'：跟随系统外观（useColorScheme）。
+ *
+ * 色值来源约定：
+ * - 主色沿用项目既有主色 #2080F0（原 DuxPopup 弹窗族、现 X 弹窗族同款）；
+ * - 浅色语义色（成功/警告/错误/边框/文字灰阶）按 antd v5 默认 token 取值；
+ * - 暗黑文字灰阶按 antd v5 dark 算法（白色低透明度阶梯），
+ *   容器/布局底色对齐项目 App 级 Colors.dark（#000000 / #212225），保证组件
+ *   贴合应用页面背景而不是自成一套。
+ * ============================================================================
+ */
+export declare const lightTokens: {
+    /** 品牌色（项目主色） */
+    readonly colorPrimary: "#2080F0";
+    /** 主色按压反馈用的浅主色（对标 antd colorPrimaryActive/BorderHover 一档） */
+    readonly colorPrimaryActive: "#0E6FD8";
+    /** 主色弱背景（对标 antd colorPrimaryBg） */
+    readonly colorPrimaryBg: "#E6F1FE";
+    readonly colorSuccess: "#52C41A";
+    readonly colorSuccessBg: "#F6FFED";
+    readonly colorWarning: "#FAAD14";
+    readonly colorWarningBg: "#FFFBE6";
+    readonly colorError: "#FF4D4F";
+    readonly colorErrorBg: "#FFF2F0";
+    /** 主文字（对标 antd colorText：rgba(0,0,0,0.88)） */
+    readonly colorText: "rgba(0, 0, 0, 0.88)";
+    /** 次要文字（对标 antd colorTextSecondary） */
+    readonly colorTextSecondary: "rgba(0, 0, 0, 0.65)";
+    readonly colorTextTertiary: "rgba(0, 0, 0, 0.45)";
+    readonly colorTextQuaternary: "rgba(0, 0, 0, 0.25)";
+    /** 实底主色上的文字 / 图标色（对标 antd colorTextLightSolid：primary 按钮、选中态文字用） */
+    readonly colorTextLightSolid: "#FFFFFF";
+    /** 描边色（对标 antd colorBorder） */
+    readonly colorBorder: "#D9D9D9";
+    /** 弱分割线（对标 antd colorSplit） */
+    readonly colorSplit: "#F0F0F0";
+    /** 进度条轨道底色（比 colorSplit 深一档，白底卡片上肉眼可见） */
+    readonly colorProgressTrack: "#E5E7EB";
+    readonly colorBgContainer: "#FFFFFF";
+    readonly colorBgLayout: "#F5F5F5";
+    /** 禁用态容器底色（对标 antd colorBgContainerDisabled） */
+    readonly colorBgContainerDisabled: "rgba(0, 0, 0, 0.04)";
+    /** 禁用态主色（浅一档的主色，用于主按钮禁用底色） */
+    readonly colorPrimaryDisabled: "#91C9FF";
+    /** 小圆角：输入框 / 小按钮 / 标签（对标 antd borderRadiusSM） */
+    readonly borderRadiusSM: 4;
+    readonly borderRadius: 6;
+    readonly borderRadiusLG: 8;
+    /** 卡片 / 大面板圆角（项目扩展：antd 只有 2/4/6/8 四档，此档对齐项目既有卡片视觉） */
+    readonly borderRadiusXL: 12;
+    /** 文本字号（对标 antd v5 默认 fontSize 14） */
+    readonly fontSize: 14;
+    readonly fontSizeSM: 12;
+    readonly fontSizeLG: 16;
+    readonly controlHeight: 36;
+    readonly controlHeightSM: 30;
+    readonly controlHeightLG: 44;
+    /** 动效时长（对标 antd motionDurationMid） */
+    readonly motionDurationMid: 200;
+};
+/** 两套 token 的统一形状（以浅色为基准；暗黑必须提供全部键）。
+ * 注意：把 as const 的字面量类型拓宽为 string/number，否则 darkTokens 的
+ * 任何色值都会因"字面量不相等"报类型错误。 */
+type Widen<T> = {
+    [K in keyof T]: T[K] extends string ? string : T[K] extends number ? number : never;
+};
+export type XTheme = Widen<typeof lightTokens>;
+/**
+ * 暗黑 token：
+ * - 文字 = 白色透明度阶梯（antd v5 dark 算法）；
+ * - colorBgLayout = #000000、colorBgContainer = #212225，对齐 App 级 Colors.dark，
+ *   弹层面板压在页面上时与 backgroundElement 同色系；
+ * - 语义色底（PrimaryBg/SuccessBg/...）改为对应主色的低透明度版本，暗底下不会刺眼；
+ * - 分割线/边框用白色低透明度，避免死灰感。
+ */
+export declare const darkTokens: XTheme;
+/**
+ * 【向后兼容】旧代码里的 xTheme 就是浅色 token。
+ * 新组件请改用 useXTheme()（见下方），静态导入只允许用于"与模式无关"的取值。
+ */
+export declare const xTheme: {
+    /** 品牌色（项目主色） */
+    readonly colorPrimary: "#2080F0";
+    /** 主色按压反馈用的浅主色（对标 antd colorPrimaryActive/BorderHover 一档） */
+    readonly colorPrimaryActive: "#0E6FD8";
+    /** 主色弱背景（对标 antd colorPrimaryBg） */
+    readonly colorPrimaryBg: "#E6F1FE";
+    readonly colorSuccess: "#52C41A";
+    readonly colorSuccessBg: "#F6FFED";
+    readonly colorWarning: "#FAAD14";
+    readonly colorWarningBg: "#FFFBE6";
+    readonly colorError: "#FF4D4F";
+    readonly colorErrorBg: "#FFF2F0";
+    /** 主文字（对标 antd colorText：rgba(0,0,0,0.88)） */
+    readonly colorText: "rgba(0, 0, 0, 0.88)";
+    /** 次要文字（对标 antd colorTextSecondary） */
+    readonly colorTextSecondary: "rgba(0, 0, 0, 0.65)";
+    readonly colorTextTertiary: "rgba(0, 0, 0, 0.45)";
+    readonly colorTextQuaternary: "rgba(0, 0, 0, 0.25)";
+    /** 实底主色上的文字 / 图标色（对标 antd colorTextLightSolid：primary 按钮、选中态文字用） */
+    readonly colorTextLightSolid: "#FFFFFF";
+    /** 描边色（对标 antd colorBorder） */
+    readonly colorBorder: "#D9D9D9";
+    /** 弱分割线（对标 antd colorSplit） */
+    readonly colorSplit: "#F0F0F0";
+    /** 进度条轨道底色（比 colorSplit 深一档，白底卡片上肉眼可见） */
+    readonly colorProgressTrack: "#E5E7EB";
+    readonly colorBgContainer: "#FFFFFF";
+    readonly colorBgLayout: "#F5F5F5";
+    /** 禁用态容器底色（对标 antd colorBgContainerDisabled） */
+    readonly colorBgContainerDisabled: "rgba(0, 0, 0, 0.04)";
+    /** 禁用态主色（浅一档的主色，用于主按钮禁用底色） */
+    readonly colorPrimaryDisabled: "#91C9FF";
+    /** 小圆角：输入框 / 小按钮 / 标签（对标 antd borderRadiusSM） */
+    readonly borderRadiusSM: 4;
+    readonly borderRadius: 6;
+    readonly borderRadiusLG: 8;
+    /** 卡片 / 大面板圆角（项目扩展：antd 只有 2/4/6/8 四档，此档对齐项目既有卡片视觉） */
+    readonly borderRadiusXL: 12;
+    /** 文本字号（对标 antd v5 默认 fontSize 14） */
+    readonly fontSize: 14;
+    readonly fontSizeSM: 12;
+    readonly fontSizeLG: 16;
+    readonly controlHeight: 36;
+    readonly controlHeightSM: 30;
+    readonly controlHeightLG: 44;
+    /** 动效时长（对标 antd motionDurationMid） */
+    readonly motionDurationMid: 200;
+};
+/** 主题模式：light 强制浅色 / dark 强制暗黑 / system 跟随系统（默认） */
+export type XThemeMode = 'light' | 'dark' | 'system';
+/** 实际生效的明暗方案 */
+export type XThemeScheme = 'light' | 'dark';
+/** 全局切换主题模式（命令式，任何地方可调用） */
+export declare function setXThemeMode(mode: XThemeMode): void;
+/** 读取当前模式（非 React 环境 / 事件回调里用） */
+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;
+export {};

package/dist/theme.js

@@ -0,0 +1,161 @@
+/**
+ * ============================================================================
+ * X-Components 共享设计 token（对标 antd v5 design token，取值做 RN 适配）
+ * ============================================================================
+ *
+ * 【v2：暗黑模式】
+ * - 本文件现在维护两套完整 token：lightTokens / darkTokens，键完全一致；
+ * - 组件统一用 useXTheme() 取当前模式的 token（跟随系统 + 可强制覆盖），
+ *   旧代码里的 `import {xTheme} from '../theme'` 仍然有效（xTheme === lightTokens），
+ *   但只有走 useXTheme() 才能获得暗黑适配；
+ * - 尺寸类 token（圆角/字号/高度/时长）两种模式共用一套值，只有颜色不同。
+ *
+ * 【切换模式】
+ * - setXThemeMode('light' | 'dark' | 'system')，全局生效（zustand）；
+ * - 默认 'system'：跟随系统外观（useColorScheme）。
+ *
+ * 色值来源约定：
+ * - 主色沿用项目既有主色 #2080F0（原 DuxPopup 弹窗族、现 X 弹窗族同款）；
+ * - 浅色语义色（成功/警告/错误/边框/文字灰阶）按 antd v5 默认 token 取值；
+ * - 暗黑文字灰阶按 antd v5 dark 算法（白色低透明度阶梯），
+ *   容器/布局底色对齐项目 App 级 Colors.dark（#000000 / #212225），保证组件
+ *   贴合应用页面背景而不是自成一套。
+ * ============================================================================
+ */
+export const lightTokens = {
+    /** 品牌色（项目主色） */
+    colorPrimary: '#2080F0',
+    /** 主色按压反馈用的浅主色（对标 antd colorPrimaryActive/BorderHover 一档） */
+    colorPrimaryActive: '#0E6FD8',
+    /** 主色弱背景（对标 antd colorPrimaryBg） */
+    colorPrimaryBg: '#E6F1FE',
+    colorSuccess: '#52C41A',
+    colorSuccessBg: '#F6FFED',
+    colorWarning: '#FAAD14',
+    colorWarningBg: '#FFFBE6',
+    colorError: '#FF4D4F',
+    colorErrorBg: '#FFF2F0',
+    /** 主文字（对标 antd colorText：rgba(0,0,0,0.88)） */
+    colorText: 'rgba(0, 0, 0, 0.88)',
+    /** 次要文字（对标 antd colorTextSecondary） */
+    colorTextSecondary: 'rgba(0, 0, 0, 0.65)',
+    colorTextTertiary: 'rgba(0, 0, 0, 0.45)',
+    colorTextQuaternary: 'rgba(0, 0, 0, 0.25)',
+    /** 实底主色上的文字 / 图标色（对标 antd colorTextLightSolid：primary 按钮、选中态文字用） */
+    colorTextLightSolid: '#FFFFFF',
+    /** 描边色（对标 antd colorBorder） */
+    colorBorder: '#D9D9D9',
+    /** 弱分割线（对标 antd colorSplit） */
+    colorSplit: '#F0F0F0',
+    /** 进度条轨道底色（比 colorSplit 深一档，白底卡片上肉眼可见） */
+    colorProgressTrack: '#E5E7EB',
+    colorBgContainer: '#FFFFFF',
+    colorBgLayout: '#F5F5F5',
+    /** 禁用态容器底色（对标 antd colorBgContainerDisabled） */
+    colorBgContainerDisabled: 'rgba(0, 0, 0, 0.04)',
+    /** 禁用态主色（浅一档的主色，用于主按钮禁用底色） */
+    colorPrimaryDisabled: '#91C9FF',
+    /** 小圆角：输入框 / 小按钮 / 标签（对标 antd borderRadiusSM） */
+    borderRadiusSM: 4,
+    borderRadius: 6,
+    borderRadiusLG: 8,
+    /** 卡片 / 大面板圆角（项目扩展：antd 只有 2/4/6/8 四档，此档对齐项目既有卡片视觉） */
+    borderRadiusXL: 12,
+    /** 文本字号（对标 antd v5 默认 fontSize 14） */
+    fontSize: 14,
+    fontSizeSM: 12,
+    fontSizeLG: 16,
+    controlHeight: 36,
+    controlHeightSM: 30,
+    controlHeightLG: 44,
+    /** 动效时长（对标 antd motionDurationMid） */
+    motionDurationMid: 200,
+};
+/**
+ * 暗黑 token：
+ * - 文字 = 白色透明度阶梯（antd v5 dark 算法）；
+ * - colorBgLayout = #000000、colorBgContainer = #212225，对齐 App 级 Colors.dark，
+ *   弹层面板压在页面上时与 backgroundElement 同色系；
+ * - 语义色底（PrimaryBg/SuccessBg/...）改为对应主色的低透明度版本，暗底下不会刺眼；
+ * - 分割线/边框用白色低透明度，避免死灰感。
+ */
+export const darkTokens = {
+    colorPrimary: '#2080F0',
+    colorPrimaryActive: '#3C93F5',
+    colorPrimaryBg: 'rgba(32, 128, 240, 0.18)',
+    colorSuccess: '#6BD643',
+    colorSuccessBg: 'rgba(82, 196, 26, 0.16)',
+    colorWarning: '#FFC53D',
+    colorWarningBg: 'rgba(250, 173, 20, 0.16)',
+    colorError: '#FF7875',
+    colorErrorBg: 'rgba(255, 77, 79, 0.16)',
+    colorText: 'rgba(255, 255, 255, 0.88)',
+    colorTextSecondary: 'rgba(255, 255, 255, 0.65)',
+    colorTextTertiary: 'rgba(255, 255, 255, 0.45)',
+    colorTextQuaternary: 'rgba(255, 255, 255, 0.25)',
+    colorTextLightSolid: '#FFFFFF',
+    colorBorder: 'rgba(255, 255, 255, 0.22)',
+    colorSplit: 'rgba(255, 255, 255, 0.08)',
+    colorProgressTrack: 'rgba(255, 255, 255, 0.12)',
+    colorBgContainer: '#212225',
+    colorBgLayout: '#000000',
+    colorBgContainerDisabled: 'rgba(255, 255, 255, 0.08)',
+    colorPrimaryDisabled: 'rgba(32, 128, 240, 0.38)',
+    borderRadiusSM: 4,
+    borderRadius: 6,
+    borderRadiusLG: 8,
+    borderRadiusXL: 12,
+    fontSize: 14,
+    fontSizeSM: 12,
+    fontSizeLG: 16,
+    controlHeight: 36,
+    controlHeightSM: 30,
+    controlHeightLG: 44,
+    motionDurationMid: 200,
+};
+/**
+ * 【向后兼容】旧代码里的 xTheme 就是浅色 token。
+ * 新组件请改用 useXTheme()（见下方），静态导入只允许用于"与模式无关"的取值。
+ */
+export const xTheme = lightTokens;
+// ---------------------------------------------------------------------------
+// 模式状态（zustand 全局单例：任何组件 setXThemeMode('dark') 全库即时换肤）
+// ---------------------------------------------------------------------------
+import { create } from 'zustand';
+import { useColorScheme } from 'react-native';
+const useXThemeModeStore = create(set => ({
+    mode: 'system',
+    setMode: mode => set({ mode }),
+}));
+/** 全局切换主题模式（命令式，任何地方可调用） */
+export function setXThemeMode(mode) {
+    useXThemeModeStore.getState().setMode(mode);
+}
+/** 读取当前模式（非 React 环境 / 事件回调里用） */
+export function getXThemeMode() {
+    return useXThemeModeStore.getState().mode;
+}
+/** 订阅当前模式（React 组件里用） */
+export function useXThemeMode() {
+    return useXThemeModeStore(s => s.mode);
+}
+/**
+ * 【核心 Hook】当前模式下的完整 token 集。
+ *
+ * - 返回值是模块级常量对象（lightTokens / darkTokens），
+ *   引用稳定、不会触发无谓重渲染；模式切换时组件自然重渲染取到新对象；
+ * - 解析规则：mode==='system' 时跟随 useColorScheme()，
+ *   否则用强制值（未挂 Provider 也能工作，状态全局单例）。
+ */
+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;
+}
+/** 当前实际生效的明暗方案（isDark 便捷判断用） */
+export function useXThemeScheme() {
+    const mode = useXThemeModeStore(s => s.mode);
+    const systemScheme = useColorScheme();
+    return mode === 'system' ? (systemScheme === 'dark' ? 'dark' : 'light') : mode;
+}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "react-native-x-components",
+  "version": "0.1.0",
+  "description": "Ant Design 风格的 React Native (Expo) 组件库：表单/弹层(TopView)/日历/Skia逐字签名/上传适配器(MinIO预签名)/轻量图表，内置暗黑模式与中英双语。",
+  "main": "dist/index.js",
+  "react-native": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "react-native",
+    "expo",
+    "components",
+    "ui-kit",
+    "antd",
+    "ant-design",
+    "calendar",
+    "signature",
+    "skia",
+    "upload",
+    "minio",
+    "presigned",
+    "charts",
+    "dark-mode",
+    "i18n",
+    "topview",
+    "popup"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maoyuxiang/rn-x-components.git"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "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"
+  },
+  "peerDependenciesMeta": {
+    "@shopify/react-native-skia": {
+      "optional": true
+    },
+    "@react-native-vector-icons/ant-design": {
+      "optional": true
+    },
+    "expo-audio": {
+      "optional": true
+    },
+    "expo-file-system": {
+      "optional": true
+    },
+    "expo-image-manipulator": {
+      "optional": true
+    },
+    "expo-image-picker": {
+      "optional": true
+    },
+    "react-native-gesture-handler": {
+      "optional": true
+    },
+    "react-native-linear-gradient": {
+      "optional": true
+    },
+    "react-native-zoom-toolkit": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "dayjs": "^1.11.0",
+    "zustand": "^5.0.0"
+  }
+}