@particle-network/ui-react 0.5.1-beta.3 → 0.5.1-beta.5

package/dist/heroui/utils/colors.js

@@ -0,0 +1,121 @@
+import { readableColor } from "color2k";
+import { colorWeight as external_constants_js_colorWeight, defaultDarkColorWeight, defaultLightColorWeight } from "../constants.js";
+import { swapColorValues } from "./object.js";
+import values_0 from "values.js";
+function colorValuesToRgb(value) {
+    return `rgba(${value.rgb.join(', ')}, ${value.alpha})`;
+}
+function hexToRgb(hex) {
+    let r = 0, g = 0, b = 0;
+    if (4 === hex.length || 5 === hex.length) {
+        r = parseInt(hex[1] + hex[1], 16);
+        g = parseInt(hex[2] + hex[2], 16);
+        b = parseInt(hex[3] + hex[3], 16);
+    } else if (7 === hex.length || 9 === hex.length) {
+        r = parseInt(hex.slice(1, 3), 16);
+        g = parseInt(hex.slice(3, 5), 16);
+        b = parseInt(hex.slice(5, 7), 16);
+    } else throw new Error('Invalid hex color format');
+    return [
+        r,
+        g,
+        b
+    ];
+}
+function hexToHsl(hex) {
+    const [r, g, b] = hexToRgb(hex);
+    const normalizedR = r / 255;
+    const normalizedG = g / 255;
+    const normalizedB = b / 255;
+    const max = Math.max(normalizedR, normalizedG, normalizedB);
+    const min = Math.min(normalizedR, normalizedG, normalizedB);
+    const lightness = (max + min) / 2;
+    if (max === min) return `0 0% ${100 * lightness}%`;
+    let saturation = 0;
+    saturation = lightness < 0.5 ? (max - min) / (max + min) : (max - min) / (2 - max - min);
+    let hue;
+    hue = max === normalizedR ? (normalizedG - normalizedB) / (max - min) : max === normalizedG ? 2 + (normalizedB - normalizedR) / (max - min) : 4 + (normalizedR - normalizedG) / (max - min);
+    hue *= 60;
+    if (hue < 0) hue += 360;
+    return `${hue.toFixed(2)} ${(100 * saturation).toFixed(2)}% ${(100 * lightness).toFixed(2)}%`;
+}
+function getColorWeight(colorType, theme) {
+    if ('default' === colorType) return 'dark' === theme ? defaultDarkColorWeight : defaultLightColorWeight;
+    return external_constants_js_colorWeight;
+}
+function rgbValueToHex(c) {
+    const hex = c.toString(16);
+    return 1 === hex.length ? `0${hex}` : hex;
+}
+function rgbToHex([r, g, b]) {
+    return `#${rgbValueToHex(r)}${rgbValueToHex(g)}${rgbValueToHex(b)}`;
+}
+function generateThemeColor(color, type, theme) {
+    const values = new values_0(color);
+    const colorWeight = getColorWeight(type, theme);
+    const colorValues = values.all(colorWeight);
+    const shades = colorValues.slice(0, colorValues.length - 1).reduce((acc, shadeValue, index)=>{
+        acc[0 === index ? 50 : 100 * index] = rgbToHex(shadeValue.rgb);
+        return acc;
+    }, {});
+    const twTheme = {
+        ...'light' === theme ? shades : swapColorValues(shades),
+        foreground: readableColor(shades[500]),
+        DEFAULT: shades[500]
+    };
+    const cssVariables = [
+        [
+            `--heroui-${type}-50`,
+            twTheme[50]
+        ],
+        [
+            `--heroui-${type}-100`,
+            twTheme[100]
+        ],
+        [
+            `--heroui-${type}-200`,
+            twTheme[200]
+        ],
+        [
+            `--heroui-${type}-300`,
+            twTheme[300]
+        ],
+        [
+            `--heroui-${type}-400`,
+            twTheme[400]
+        ],
+        [
+            `--heroui-${type}-500`,
+            twTheme[500]
+        ],
+        [
+            `--heroui-${type}-600`,
+            twTheme[600]
+        ],
+        [
+            `--heroui-${type}-700`,
+            twTheme[700]
+        ],
+        [
+            `--heroui-${type}-800`,
+            twTheme[800]
+        ],
+        [
+            `--heroui-${type}-900`,
+            twTheme[900]
+        ],
+        [
+            `--heroui-${type}-foreground`,
+            twTheme.foreground
+        ],
+        [
+            `--heroui-${type}`,
+            twTheme.DEFAULT
+        ]
+    ];
+    return {
+        twTheme,
+        cssVariables
+    };
+}
+export { colorValuesToRgb, generateThemeColor, getColorWeight, hexToHsl };

package/dist/heroui/utils/object.d.ts

@@ -0,0 +1 @@
+export declare function swapColorValues<T extends Object>(colors: T): {};

package/dist/heroui/utils/object.js

@@ -0,0 +1,17 @@
+function swapColorValues(colors) {
+    const swappedColors = {};
+    const keys = Object.keys(colors);
+    const { length } = keys;
+    for(let i = 0; i < length / 2; i++){
+        const key1 = keys[i];
+        const key2 = keys[length - 1 - i];
+        swappedColors[key1] = colors[key2];
+        swappedColors[key2] = colors[key1];
+    }
+    if (length % 2 !== 0) {
+        const middleKey = keys[Math.floor(length / 2)];
+        swappedColors[middleKey] = colors[middleKey];
+    }
+    return swappedColors;
+}
+export { swapColorValues };

package/dist/hooks/useI18n.d.ts

@@ -1,31 +1,135 @@
 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 'bg-default': "Background";
+        readonly 'bg-200': "Background Quaternary";
+        readonly 'bg-300': "Background Tertiary";
+        readonly 'bg-400': "Background Secondary";
+        readonly overlay: "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 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 'bg-default': "一级背景色";
+        readonly 'bg-200': "四级背景色";
+        readonly 'bg-300': "三级背景色";
+        readonly 'bg-400': "二级背景色";
+        readonly overlay: "浮窗色";
+        readonly default: "默认";
+        readonly foreground: "一级文字色";
+        readonly secondary: "二级文字色";
+        readonly tertiary: "三级文字色";
+        readonly divider: "分割线";
+        readonly success: "绿色信号";
+        readonly danger: "红色信号";
+        readonly warning: "黄色信号";
+        readonly alert: "橙色信号";
+        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,45 @@ 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',
+        'bg-default': 'Background',
+        'bg-200': 'Background Quaternary',
+        'bg-300': 'Background Tertiary',
+        'bg-400': 'Background Secondary',
+        overlay: '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',
+        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 +92,55 @@ const zh = {
                 show: '显示示例',
                 hide: '隐藏示例'
             }
+        },
+        custom: {
+            title: '自定义主题',
+            preset: '主题预设',
+            swapUpDown: '涨跌色互换',
+            categories: {
+                basic: '基础',
+                background: '背景',
+                text: '文字',
+                candle: 'K线',
+                signal: '信号'
+            }
         }
     },
+    colors: {
+        primary: '主要色',
+        bullish: '上涨色',
+        bearish: '下跌色',
+        'bg-default': '一级背景色',
+        'bg-200': '四级背景色',
+        'bg-300': '三级背景色',
+        'bg-400': '二级背景色',
+        overlay: '浮窗色',
+        default: '默认',
+        foreground: '一级文字色',
+        secondary: '二级文字色',
+        tertiary: '三级文字色',
+        divider: '分割线',
+        success: '绿色信号',
+        danger: '红色信号',
+        warning: '黄色信号',
+        alert: '橙色信号',
+        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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.5.1-beta.3",
+  "version": "0.5.1-beta.5",
   "type": "module",
   "exports": {
     ".": {
@@ -48,10 +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.1-beta.0",
-    "@particle-network/ui-shared": "0.4.0"
+    "@particle-network/icons": "0.5.1-beta.2",
+    "@particle-network/ui-shared": "0.4.1-beta.1"
   },
   "scripts": {
     "build": "rslib build",