@particle-network/ui-react 0.5.1-beta.0 → 0.5.1-beta.10

package/dist/hooks/useI18n.d.ts

@@ -1,31 +1,139 @@
 export declare const useI18n: () => {
-    table: {
-        emptyContent: string;
-    };
-    copy: {
-        copy: string;
-        success: string;
-        error: string;
-        address: string;
-    };
-    theme: {
-        title: string;
-        done: string;
-        font: {
-            title: string;
-            placeholder: string;
-            loading: string;
-            success: string;
-            error: string;
-            hint: string;
-            example: {
-                show: string;
-                hide: string;
+    readonly table: {
+        readonly emptyContent: "No data";
+    };
+    readonly copy: {
+        readonly copy: "Copy";
+        readonly success: "Copied successfully!";
+        readonly error: "Copy failed: ";
+        readonly address: "Address copied: ";
+    };
+    readonly theme: {
+        readonly title: "Theme";
+        readonly done: "Finish";
+        readonly font: {
+            readonly title: "Custom Font";
+            readonly placeholder: "Enter Google Fonts URL or custom font URL";
+            readonly loading: "Loading font...";
+            readonly success: "Font loaded: ";
+            readonly error: "Failed to load font";
+            readonly hint: "Try Google Fonts: ";
+            readonly example: {
+                readonly show: "Show example";
+                readonly hide: "Hide example";
+            };
+        };
+        readonly custom: {
+            readonly title: "Custom Theme";
+            readonly preset: "Theme Preset";
+            readonly swapUpDown: "Swap Up/Down Color";
+            readonly categories: {
+                readonly basic: "Basic";
+                readonly background: "Background";
+                readonly text: "Text";
+                readonly candle: "Candle";
+                readonly signal: "Signal";
+            };
+        };
+    };
+    readonly colors: {
+        readonly primary: "Primary";
+        readonly bullish: "Positive";
+        readonly bearish: "Negative";
+        readonly bgDefault: "Background Primary";
+        readonly bg200: "Background Quaternary";
+        readonly bg300: "Background Tertiary";
+        readonly bg400: "Background Secondary";
+        readonly cursor: "Background Selected";
+        readonly overlay: "Background Overlay";
+        readonly default: "Default";
+        readonly foreground: "Text Primary";
+        readonly secondary: "Text Secondary";
+        readonly tertiary: "Text Tertiary";
+        readonly divider: "Divider";
+        readonly success: "Signal Green";
+        readonly danger: "Signal Red";
+        readonly warning: "Signal Yellow";
+        readonly alert: "Signal Orange";
+        readonly blue: "Signal Blue";
+        readonly candleUp: "Body (up)";
+        readonly candleDown: "Body (down)";
+        readonly candleWickUp: "Wick (up)";
+        readonly candleWickDown: "Wick (down)";
+        readonly candleBorderUp: "Border (up)";
+        readonly candleBorderDown: "Border (down)";
+    };
+    readonly switch: {
+        readonly on: "On";
+        readonly off: "Off";
+    };
+} | {
+    readonly table: {
+        readonly emptyContent: "暂无数据";
+    };
+    readonly copy: {
+        readonly copy: "复制";
+        readonly success: "复制成功！";
+        readonly error: "复制失败：";
+        readonly address: "地址已复制：";
+    };
+    readonly theme: {
+        readonly title: "主题";
+        readonly done: "完成";
+        readonly font: {
+            readonly title: "自定义字体";
+            readonly placeholder: "输入 Google Fonts 或自定义字体链接";
+            readonly loading: "正在加载字体...";
+            readonly success: "已加载字体：";
+            readonly error: "字体加载失败";
+            readonly hint: "参考 Google Fonts: ";
+            readonly example: {
+                readonly show: "显示示例";
+                readonly hide: "隐藏示例";
             };
         };
+        readonly custom: {
+            readonly title: "自定义主题";
+            readonly preset: "主题预设";
+            readonly swapUpDown: "涨跌色互换";
+            readonly categories: {
+                readonly basic: "基础";
+                readonly background: "背景";
+                readonly text: "文字";
+                readonly candle: "K线";
+                readonly signal: "信号";
+            };
+        };
+    };
+    readonly colors: {
+        readonly primary: "主要色";
+        readonly bullish: "上涨色";
+        readonly bearish: "下跌色";
+        readonly bgDefault: "一级背景色";
+        readonly bg200: "四级背景色";
+        readonly bg300: "三级背景色";
+        readonly bg400: "二级背景色";
+        readonly cursor: "选中背景色";
+        readonly overlay: "浮窗背景色";
+        readonly default: "默认";
+        readonly foreground: "一级文字色";
+        readonly secondary: "二级文字色";
+        readonly tertiary: "三级文字色";
+        readonly divider: "分割线";
+        readonly success: "绿色信号";
+        readonly danger: "红色信号";
+        readonly warning: "黄色信号";
+        readonly alert: "橙色信号";
+        readonly blue: "蓝色信号";
+        readonly candleUp: "主体色 (上涨)";
+        readonly candleDown: "主体色 (下跌)";
+        readonly candleWickUp: "影线 (上涨)";
+        readonly candleWickDown: "影线 (下跌)";
+        readonly candleBorderUp: "边框 (上涨)";
+        readonly candleBorderDown: "边框 (下跌)";
     };
-    switch: {
-        on: string;
-        off: string;
+    readonly switch: {
+        readonly on: "开";
+        readonly off: "关";
     };
 };

package/dist/hooks/useI18n.js

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { useLang } from "./useLang.js";
 const en = {
     table: {
@@ -23,8 +24,47 @@ const en = {
                 show: 'Show example',
                 hide: 'Hide example'
             }
+        },
+        custom: {
+            title: 'Custom Theme',
+            preset: 'Theme Preset',
+            swapUpDown: 'Swap Up/Down Color',
+            categories: {
+                basic: 'Basic',
+                background: 'Background',
+                text: 'Text',
+                candle: 'Candle',
+                signal: 'Signal'
+            }
         }
     },
+    colors: {
+        primary: 'Primary',
+        bullish: 'Positive',
+        bearish: 'Negative',
+        bgDefault: 'Background Primary',
+        bg200: 'Background Quaternary',
+        bg300: 'Background Tertiary',
+        bg400: 'Background Secondary',
+        cursor: 'Background Selected',
+        overlay: 'Background Overlay',
+        default: 'Default',
+        foreground: 'Text Primary',
+        secondary: 'Text Secondary',
+        tertiary: 'Text Tertiary',
+        divider: 'Divider',
+        success: 'Signal Green',
+        danger: 'Signal Red',
+        warning: 'Signal Yellow',
+        alert: 'Signal Orange',
+        blue: 'Signal Blue',
+        candleUp: 'Body (up)',
+        candleDown: 'Body (down)',
+        candleWickUp: 'Wick (up)',
+        candleWickDown: 'Wick (down)',
+        candleBorderUp: 'Border (up)',
+        candleBorderDown: 'Border (down)'
+    },
     switch: {
         on: 'On',
         off: 'Off'
@@ -54,15 +94,57 @@ const zh = {
                 show: '显示示例',
                 hide: '隐藏示例'
             }
+        },
+        custom: {
+            title: '自定义主题',
+            preset: '主题预设',
+            swapUpDown: '涨跌色互换',
+            categories: {
+                basic: '基础',
+                background: '背景',
+                text: '文字',
+                candle: 'K线',
+                signal: '信号'
+            }
         }
     },
+    colors: {
+        primary: '主要色',
+        bullish: '上涨色',
+        bearish: '下跌色',
+        bgDefault: '一级背景色',
+        bg200: '四级背景色',
+        bg300: '三级背景色',
+        bg400: '二级背景色',
+        cursor: '选中背景色',
+        overlay: '浮窗背景色',
+        default: '默认',
+        foreground: '一级文字色',
+        secondary: '二级文字色',
+        tertiary: '三级文字色',
+        divider: '分割线',
+        success: '绿色信号',
+        danger: '红色信号',
+        warning: '黄色信号',
+        alert: '橙色信号',
+        blue: '蓝色信号',
+        candleUp: '主体色 (上涨)',
+        candleDown: '主体色 (下跌)',
+        candleWickUp: '影线 (上涨)',
+        candleWickDown: '影线 (下跌)',
+        candleBorderUp: '边框 (上涨)',
+        candleBorderDown: '边框 (下跌)'
+    },
     switch: {
         on: '开',
         off: '关'
     }
 };
 const useI18n = ()=>{
-    const lang = useLang();
-    return 'zh' === lang ? zh : en;
+    const { lang } = useLang();
+    const i18n = useMemo(()=>'zh' === lang ? zh : en, [
+        lang
+    ]);
+    return i18n;
 };
 export { useI18n };

package/dist/hooks/useLang.d.ts

@@ -1,3 +1,7 @@
 type Language = 'zh' | 'en';
-export declare function useLang(): Language;
+export declare function useLang(): {
+    lang: Language;
+    setLang: (lang: Language) => void;
+    toggleLang: () => void;
+};
 export {};

package/dist/hooks/useLang.js

@@ -23,6 +23,18 @@ function useLang() {
             observer.disconnect();
         };
     }, []);
-    return lang;
+    const handleSetLang = (lang)=>{
+        setLang(lang);
+        document.documentElement.lang = lang;
+    };
+    const toggleLang = ()=>{
+        const newLang = 'zh' === lang ? 'en' : 'zh';
+        handleSetLang(newLang);
+    };
+    return {
+        lang,
+        setLang: handleSetLang,
+        toggleLang
+    };
 }
 export { useLang };

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,258 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge, twMerge } from "tailwind-merge";
+const COMMON_UNITS = [
+    'small',
+    'medium',
+    'large'
+];
+const FONT_SIZE = [
+    'xxs',
+    'tiny',
+    'caption1',
+    'body3',
+    'body2',
+    'body1',
+    'h4',
+    'h3',
+    'h2',
+    'h1'
+];
+const COMMON_SPACING = [
+    'xs',
+    'sm',
+    'md',
+    'lg'
+];
+const OPACITY = [
+    'disabled',
+    'hover'
+];
+const cn_twMerge = extendTailwindMerge({
+    extend: {
+        classGroups: {
+            'font-size': [
+                {
+                    text: [
+                        ...FONT_SIZE,
+                        ...COMMON_UNITS
+                    ]
+                }
+            ],
+            px: [
+                {
+                    px: COMMON_SPACING
+                }
+            ],
+            py: [
+                {
+                    py: COMMON_SPACING
+                }
+            ],
+            pt: [
+                {
+                    pt: COMMON_SPACING
+                }
+            ],
+            pb: [
+                {
+                    pb: COMMON_SPACING
+                }
+            ],
+            pl: [
+                {
+                    pl: COMMON_SPACING
+                }
+            ],
+            pr: [
+                {
+                    pr: COMMON_SPACING
+                }
+            ],
+            ps: [
+                {
+                    ps: COMMON_SPACING
+                }
+            ],
+            pe: [
+                {
+                    pe: COMMON_SPACING
+                }
+            ],
+            p: [
+                {
+                    p: COMMON_SPACING
+                }
+            ],
+            m: [
+                {
+                    m: COMMON_SPACING
+                }
+            ],
+            mx: [
+                {
+                    mx: COMMON_SPACING
+                }
+            ],
+            my: [
+                {
+                    my: COMMON_SPACING
+                }
+            ],
+            mt: [
+                {
+                    mt: COMMON_SPACING
+                }
+            ],
+            mb: [
+                {
+                    mb: COMMON_SPACING
+                }
+            ],
+            ml: [
+                {
+                    ml: COMMON_SPACING
+                }
+            ],
+            mr: [
+                {
+                    mr: COMMON_SPACING
+                }
+            ],
+            ms: [
+                {
+                    ms: COMMON_SPACING
+                }
+            ],
+            me: [
+                {
+                    me: COMMON_SPACING
+                }
+            ],
+            gap: [
+                {
+                    gap: COMMON_SPACING
+                }
+            ],
+            'gap-x': [
+                {
+                    'gap-x': COMMON_SPACING
+                }
+            ],
+            'gap-y': [
+                {
+                    'gap-y': COMMON_SPACING
+                }
+            ],
+            rounded: [
+                {
+                    rounded: COMMON_UNITS
+                }
+            ],
+            'rounded-s': [
+                {
+                    'rounded-s': COMMON_UNITS
+                }
+            ],
+            'rounded-e': [
+                {
+                    'rounded-e': COMMON_UNITS
+                }
+            ],
+            'rounded-t': [
+                {
+                    'rounded-t': COMMON_UNITS
+                }
+            ],
+            'rounded-r': [
+                {
+                    'rounded-r': COMMON_UNITS
+                }
+            ],
+            'rounded-b': [
+                {
+                    'rounded-b': COMMON_UNITS
+                }
+            ],
+            'rounded-l': [
+                {
+                    'rounded-l': COMMON_UNITS
+                }
+            ],
+            top: [
+                {
+                    top: COMMON_SPACING
+                }
+            ],
+            right: [
+                {
+                    right: COMMON_SPACING
+                }
+            ],
+            bottom: [
+                {
+                    bottom: COMMON_SPACING
+                }
+            ],
+            left: [
+                {
+                    left: COMMON_SPACING
+                }
+            ],
+            inset: [
+                {
+                    inset: COMMON_SPACING
+                }
+            ],
+            'inset-x': [
+                {
+                    'inset-x': COMMON_SPACING
+                }
+            ],
+            'inset-y': [
+                {
+                    'inset-y': COMMON_SPACING
+                }
+            ],
+            start: [
+                {
+                    start: COMMON_SPACING
+                }
+            ],
+            end: [
+                {
+                    end: COMMON_SPACING
+                }
+            ],
+            opacity: [
+                {
+                    opacity: OPACITY
+                }
+            ],
+            'border-w': [
+                {
+                    border: COMMON_UNITS
+                }
+            ],
+            shadow: [
+                {
+                    shadow: [
+                        'box',
+                        ...COMMON_UNITS
+                    ]
+                }
+            ]
+        }
+    }
+});
+function cn(...inputs) {
+    return cn_twMerge(clsx(inputs));
+}
+console.log(cn('text-red-500 text-brand text-h1'), '|', twMerge('text-red-500 text-brand text-h1'));
+console.log(cn('text-red-500 text-sm text-h1'), '|', twMerge('text-red-500 text-sm text-h1'));
+console.log(cn('px-2 px-md'), '|', twMerge('px-2 px-md'));
+console.log(cn('gap-2 gap-md'), '|', twMerge('gap-2 gap-md'));
+console.log(cn('rounded-sm rounded-small'), '|', twMerge('rounded-sm rounded-small'));
+console.log(cn('top-1 top-md'), '|', twMerge('top-1 top-md'));
+console.log(cn('opacity-0 opacity-disabled opacity-hover'), '|', twMerge('opacity-0 opacity-disabled opacity-hover'));
+console.log(cn('border-1 border-large'), '|', twMerge('border-1 border-large'));
+export { cn };

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses, } from './classes';
+export { cn } from './cn';
 export * from './detect';
 export * from './input-classes';
 export { colorVariants } from './variants';

package/dist/utils/index.js

@@ -1,5 +1,6 @@
 import { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses } from "./classes.js";
+import { cn } from "./cn.js";
 import { colorVariants } from "./variants.js";
 export * from "./detect.js";
 export * from "./input-classes.js";
-export { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, colorVariants, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses };
+export { absoluteFullClasses, baseStyles, cn, collapseAdjacentVariantBorders, colorVariants, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses };

package/dist/utils/input-classes.js

@@ -191,9 +191,9 @@ const inputClasses = {
                 'lg'
             ],
             class: {
-                inputWrapper: 'bg-background-200 text-tertiary font-medium',
+                inputWrapper: 'bg-background-200 text-foreground-100 font-medium',
                 label: 'font-medium',
-                input: '!outline-none placeholder:text-tertiary placeholder:font-medium font-medium text-foreground'
+                input: '!outline-none placeholder:text-foreground-100 placeholder:font-medium font-medium text-foreground'
             }
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.5.1-beta.0",
+  "version": "0.5.1-beta.10",
   "type": "module",
   "exports": {
     ".": {
@@ -38,8 +38,8 @@
     "@rslib/core": "^0.12.3",
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
-    "@particle-network/lintstaged-config": "0.1.0",
-    "@particle-network/eslint-config": "0.3.0"
+    "@particle-network/eslint-config": "0.3.0",
+    "@particle-network/lintstaged-config": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -48,9 +48,12 @@
   "dependencies": {
     "ahooks": "^3.9.4",
     "copy-to-clipboard": "^3.3.3",
+    "immer": "^11.1.3",
+    "react-aria-components": "^1.14.0",
+    "values.js": "^2.1.1",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.5.0",
-    "@particle-network/ui-shared": "0.4.0"
+    "@particle-network/icons": "0.5.1-beta.5",
+    "@particle-network/ui-shared": "0.4.1-beta.4"
   },
   "scripts": {
     "build": "rslib build",