@particle-network/ui-react 0.5.1-beta.2 → 0.5.1-beta.4

package/dist/components/UXColorPicker/color-picker.js

@@ -8,10 +8,12 @@ import RefreshCcwIcon from "@particle-network/icons/web/RefreshCcwIcon";
 import { HStack } from "../layout/index.js";
 import { UXButton } from "../UXButton/index.js";
 import { UXPopover, UXPopoverContent, UXPopoverTrigger } from "../UXPopover/index.js";
+import { useThemeColor } from "../UXThemeSwitch/index.js";
 import { ColorFields } from "./color-fields.js";
 import { ColorInput } from "./color-input.js";
 import { normalizeColor } from "./utils.js";
-const UXColorPicker = ({ className, value, defaultValue, onChange, onChangeEnd, onValueChange, onValueChangeEnd, isDisabled, placement = 'bottom-start' })=>{
+const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', value, defaultValue, onChange, onChangeEnd, onValueChange, onValueChangeEnd, isChanged, onReset })=>{
+    const { 'bg-200': bg200 } = useThemeColor();
     const isControlled = void 0 !== value;
     const [pickerKey, setPickerKey] = useState(0);
     const [isInputFocused, setIsInputFocused] = useState(false);
@@ -92,13 +94,16 @@ const UXColorPicker = ({ className, value, defaultValue, onChange, onChangeEnd,
         onValueChangeEnd
     ]);
     const hasChanged = useMemo(()=>{
+        if (void 0 !== isChanged) return isChanged;
         const initialHex = initialColorRef.current.toString('hex');
         const currentHex = currentColor.toString('hex');
         return initialHex !== currentHex;
     }, [
-        currentColor
+        currentColor,
+        isChanged
     ]);
     const handleReset = ()=>{
+        if (onReset) return void onReset();
         const resetColor = initialColorRef.current;
         if (!isControlled) {
             setInternalColor(resetColor);
@@ -130,10 +135,11 @@ const UXColorPicker = ({ className, value, defaultValue, onChange, onChangeEnd,
                     children: [
                         /*#__PURE__*/ jsx(UXPopoverTrigger, {
                             children: /*#__PURE__*/ jsx(UXButton, {
+                                radius: "none",
                                 size: "auto",
                                 isDisabled: isDisabled,
                                 children: /*#__PURE__*/ jsx(ColorSwatch, {
-                                    className: "h-4 w-4 rounded-sm border-none"
+                                    className: cn('h-4 w-4 rounded-[4px]', internalColor.toString('hex') === bg200 && 'border-foreground/10 border')
                                 })
                             })
                         }),
@@ -149,7 +155,7 @@ const UXColorPicker = ({ className, value, defaultValue, onChange, onChangeEnd,
                                         className: "aspect-square w-full overflow-hidden rounded-lg",
                                         onChangeEnd: handleChangeEnd,
                                         children: /*#__PURE__*/ jsx(ColorThumb, {
-                                            className: "border-1 h-2 w-2 rounded-full border-white shadow-[0_0_0_0.5px_black,inset_0_0_0_0.5px_black]"
+                                            className: "h-4 w-4 rounded-full border-2 border-white shadow-[0_2px_4px_rgba(0,0,0,0.2)]"
                                         })
                                     }),
                                     /*#__PURE__*/ jsxs(HStack, {
@@ -177,7 +183,7 @@ const UXColorPicker = ({ className, value, defaultValue, onChange, onChangeEnd,
                                                 children: /*#__PURE__*/ jsx(SliderTrack, {
                                                     className: "h-3 rounded-full",
                                                     children: /*#__PURE__*/ jsx(ColorThumb, {
-                                                        className: "top-[50%] z-10 h-4 w-4 rounded-full border-2 border-white"
+                                                        className: "top-[50%] z-10 h-4 w-4 rounded-full border-2 border-white shadow-[0_2px_4px_rgba(0,0,0,0.2)]"
                                                     })
                                                 })
                                             })
@@ -195,10 +201,10 @@ const UXColorPicker = ({ className, value, defaultValue, onChange, onChangeEnd,
                 }),
                 /*#__PURE__*/ jsx(ColorInput, {
                     isDisabled: isDisabled,
-                    inputClassName: "focus:ring-0 px-0 text-left flex-1",
+                    inputClassName: "focus:ring-0 px-0 text-left flex-1 relative h-7",
                     value: value,
                     defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
-                    onChange: (color)=>handleChange(color),
+                    onChange: handleColorFieldsChange,
                     onFocus: ()=>setIsInputFocused(true),
                     onBlur: ()=>setIsInputFocused(false)
                 }),

package/dist/components/UXColorPicker/types.d.ts

@@ -26,10 +26,21 @@ export interface UXColorPickerProps {
      * HEX 格式颜色变化结束回调（释放时调用）
      */
     onValueChangeEnd?: (color: string) => void;
+    /**
+     * 是否已改变
+     */
+    isChanged?: boolean;
+    /**
+     * 重置回调
+     */
+    onReset?: () => void;
     /**
      * 是否禁用
      */
     isDisabled?: boolean;
+    /**
+     * Popover 位置
+     */
     placement?: UXPopoverProps['placement'];
 }
 export interface ColorFieldsProps extends Pick<UXColorPickerProps, 'value' | 'defaultValue'> {

package/dist/components/UXThemeSwitch/custom-theme-config.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CustomThemeConfig: React.FC;

package/dist/components/UXThemeSwitch/custom-theme-config.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { DEFAULT_THEME_ID, themeData } from "@particle-network/ui-shared";
+import { produce } from "immer";
+import { useI18n, useLang } from "../../hooks/index.js";
+import { HStack, VStack } from "../layout/index.js";
+import { Text } from "../typography/Text.js";
+import { UXColorPicker } from "../UXColorPicker/index.js";
+import { UXSelect, UXSelectItem } from "../UXSelect/index.js";
+import { UXTab, UXTabs } from "../UXTabs/index.js";
+import { useTheme } from "./use-theme.js";
+const COLOR_CATEGORIES = {
+    basic: [
+        'primary',
+        'bullish',
+        'bearish'
+    ],
+    background: [
+        'bg-default',
+        'bg-400',
+        'bg-300',
+        'bg-200',
+        'overlay',
+        'divider'
+    ],
+    text: [
+        'foreground',
+        'secondary',
+        'tertiary'
+    ],
+    signal: [
+        'success',
+        'danger',
+        'alert',
+        'gold'
+    ]
+};
+const CustomThemeConfig = ()=>{
+    const { lang } = useLang();
+    const i18n = useI18n();
+    const { theme, setTheme } = useTheme();
+    const baseThemes = useMemo(()=>themeData.filter((t)=>'custom' !== t.id), []);
+    const baseThemeId = theme.baseThemeId || DEFAULT_THEME_ID;
+    const baseTheme = useMemo(()=>themeData.find((t)=>t.id === baseThemeId) || themeData.find((t)=>t.id === DEFAULT_THEME_ID), [
+        baseThemeId
+    ]);
+    const handleBaseThemeChange = (themeId)=>{
+        const selectedBaseTheme = themeData.find((t)=>t.id === themeId);
+        if (selectedBaseTheme) setTheme({
+            ...theme,
+            baseThemeId: themeId,
+            colorScheme: selectedBaseTheme.colorScheme,
+            colorVariables: selectedBaseTheme.colorVariables
+        });
+    };
+    const handleColorChange = (color, value)=>{
+        const updatedTheme = produce(theme, (draft)=>{
+            draft.colorVariables[color] = value;
+        });
+        setTheme(updatedTheme);
+    };
+    const getColorValue = (color)=>theme.colorVariables[color] || baseTheme.colorVariables[color] || '#000000';
+    const renderColorItem = (color, label)=>{
+        const value = getColorValue(color);
+        const isCustomized = void 0 !== theme.colorVariables[color] && theme.colorVariables[color] !== baseTheme.colorVariables[color];
+        return /*#__PURE__*/ jsxs(HStack, {
+            justify: "between",
+            children: [
+                /*#__PURE__*/ jsx(Text, {
+                    color: "secondary",
+                    children: label
+                }),
+                /*#__PURE__*/ jsx(UXColorPicker, {
+                    value: value,
+                    isChanged: isCustomized,
+                    onValueChange: (newValue)=>handleColorChange(color, newValue),
+                    onReset: ()=>handleColorChange(color, baseTheme.colorVariables[color])
+                })
+            ]
+        }, color);
+    };
+    return /*#__PURE__*/ jsxs(VStack, {
+        gap: "lg",
+        children: [
+            /*#__PURE__*/ jsx(HStack, {
+                justify: "between",
+                children: /*#__PURE__*/ jsx(Text, {
+                    body1Bold: true,
+                    children: i18n.theme.custom.title
+                })
+            }),
+            /*#__PURE__*/ jsxs(HStack, {
+                justify: "between",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        children: i18n.theme.custom.preset
+                    }),
+                    /*#__PURE__*/ jsx(UXSelect, {
+                        className: "min-w-48",
+                        selectedKeys: [
+                            baseThemeId
+                        ],
+                        onSelectionChange: (keys)=>{
+                            const selectedKey = Array.from(keys)[0];
+                            if (selectedKey) handleBaseThemeChange(selectedKey);
+                        },
+                        children: baseThemes.map((t)=>/*#__PURE__*/ jsx(UXSelectItem, {
+                                children: 'zh' === lang ? t.zhName : t.enName
+                            }, t.id))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(UXTabs, {
+                fullWidth: true,
+                variant: "switch",
+                children: Object.entries(COLOR_CATEGORIES).map(([category, colors])=>/*#__PURE__*/ jsx(UXTab, {
+                        title: i18n.theme.custom.categories[category],
+                        children: /*#__PURE__*/ jsx(VStack, {
+                            gap: "md",
+                            className: "pt-md",
+                            children: colors.map((color)=>{
+                                const label = i18n.theme.custom.colors[color] || color;
+                                return renderColorItem(color, label);
+                            })
+                        })
+                    }, category))
+            })
+        ]
+    });
+};
+export { CustomThemeConfig };

package/dist/components/UXThemeSwitch/theme-item.js

@@ -1,11 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { cn } from "@heroui/theme";
 import { useLang } from "../../hooks/index.js";
 import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
-    const lang = useLang();
+    const { lang } = useLang();
     return /*#__PURE__*/ jsxs(VStack, {
         gap: 2,
         items: "center",
@@ -123,7 +123,50 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             fill: "currentColor",
                             className: "text-secondary"
                         }),
-                        /*#__PURE__*/ jsx("rect", {
+                        'custom' === id ? /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsx("g", {
+                                    "clip-path": "url(#paint0_angular_48986_280686_clip_path)",
+                                    "data-figma-skip-parse": "true",
+                                    children: /*#__PURE__*/ jsx("g", {
+                                        transform: "matrix(0 0.011 -0.011 0 39 51)",
+                                        children: /*#__PURE__*/ jsx("foreignObject", {
+                                            x: "-1043.94",
+                                            y: "-1043.94",
+                                            width: "2087.87",
+                                            height: "2087.87",
+                                            children: /*#__PURE__*/ jsx("div", {
+                                                style: {
+                                                    background: 'conic-gradient(from 90deg,rgba(255, 0, 0, 1) 0deg,rgba(255, 133, 0, 1) 54deg,rgba(190, 255, 0, 1) 117deg,rgba(7, 225, 255, 1) 199.8deg,rgba(35, 0, 255, 1) 282.6deg,rgba(173, 0, 255, 1) 360deg)',
+                                                    height: '100%',
+                                                    width: '100%',
+                                                    opacity: 1
+                                                }
+                                            })
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx("circle", {
+                                    cx: "39",
+                                    cy: "51",
+                                    r: "10.7583",
+                                    "data-figma-gradient-fill": '{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":1.0,"g":0.0,"b":0.0,"a":1.0},"position":0.0},{"color":{"r":1.0,"g":0.52295231819152832,"b":0.0,"a":1.0},"position":0.15000000596046448},{"color":{"r":0.74555355310440063,"g":1.0,"b":0.0,"a":1.0},"position":0.32499998807907104},{"color":{"r":0.029410807415843010,"g":0.88352936506271362,"b":1.0,"a":1.0},"position":0.55500000715255737},{"color":{"r":0.14000000059604645,"g":0.0,"b":1.0,"a":1.0},"position":0.78500002622604370},{"color":{"r":0.67999994754791260,"g":0.0,"b":1.0,"a":1.0},"position":1.0}],"stopsVar":[{"color":{"r":1.0,"g":0.0,"b":0.0,"a":1.0},"position":0.0},{"color":{"r":1.0,"g":0.52295231819152832,"b":0.0,"a":1.0},"position":0.15000000596046448},{"color":{"r":0.74555355310440063,"g":1.0,"b":0.0,"a":1.0},"position":0.32499998807907104},{"color":{"r":0.029410807415843010,"g":0.88352936506271362,"b":1.0,"a":1.0},"position":0.55500000715255737},{"color":{"r":0.14000000059604645,"g":0.0,"b":1.0,"a":1.0},"position":0.78500002622604370},{"color":{"r":0.67999994754791260,"g":0.0,"b":1.0,"a":1.0},"position":1.0}],"transform":{"m00":1.3471115643134642e-15,"m01":-22.0,"m02":50.0,"m10":22.0,"m11":1.3471115643134642e-15,"m12":40.0},"opacity":1.0,"blendMode":"NORMAL","visible":true}',
+                                    stroke: "#8B8EA1",
+                                    "stroke-width": "0.483303"
+                                }),
+                                /*#__PURE__*/ jsx("defs", {
+                                    children: /*#__PURE__*/ jsx("clipPath", {
+                                        id: "paint0_angular_48986_280686_clip_path",
+                                        children: /*#__PURE__*/ jsx("circle", {
+                                            cx: "39",
+                                            cy: "51",
+                                            r: "10.7583",
+                                            "stroke-width": "0.483303"
+                                        })
+                                    })
+                                })
+                            ]
+                        }) : /*#__PURE__*/ jsx("rect", {
                             x: "27",
                             y: "39",
                             width: "22.5688",

package/dist/components/UXThemeSwitch/theme-switch.js

@@ -3,7 +3,7 @@ import { useMemo, useState } from "react";
 import { cn } from "@heroui/theme";
 import { useDisclosure } from "@heroui/use-disclosure";
 import { ChartColorSwitchIcon, CopyIcon } from "@particle-network/icons/web";
-import { themeData } from "@particle-network/ui-shared";
+import { DEFAULT_THEME_ID, themeData } from "@particle-network/ui-shared";
 import { useI18n } from "../../hooks/index.js";
 import { HStack, VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
@@ -15,6 +15,7 @@ import { UXInput } from "../UXInput/index.js";
 import { UXModal } from "../UXModal/index.js";
 import { UXSpinner } from "../UXSpinner/index.js";
 import { UXTooltip } from "../UXTooltip/index.js";
+import { CustomThemeConfig } from "./custom-theme-config.js";
 import { ThemeItem } from "./theme-item.js";
 import { useTheme } from "./use-theme.js";
 const FONT_EXAMPLES = [
@@ -39,6 +40,18 @@ const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, o
     const themes = useMemo(()=>themeData.filter((theme)=>!omitThemes.includes(theme.id)), [
         omitThemes
     ]);
+    const handleThemeSelect = (theme)=>{
+        if ('custom' === theme.id && 'custom' !== selectedTheme.id) {
+            const baseTheme = themeData.find((t)=>t.id === DEFAULT_THEME_ID) || themeData["0"];
+            const customTheme = {
+                ...theme,
+                baseThemeId: DEFAULT_THEME_ID,
+                colorScheme: baseTheme.colorScheme,
+                colorVariables: baseTheme.colorVariables
+            };
+            setTheme(customTheme);
+        } else setTheme(theme);
+    };
     return /*#__PURE__*/ jsx(Component, {
         isOpen: isOpen,
         classNames: {
@@ -61,10 +74,17 @@ const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, o
                     className: "grid grid-cols-3 gap-y-5 pt-1",
                     children: themes.map((theme)=>/*#__PURE__*/ jsx(ThemeItem, {
                             isSelected: selectedTheme.id === theme.id,
-                            onClick: ()=>setTheme(theme),
+                            onClick: ()=>handleThemeSelect(theme),
                             ...theme
                         }, theme.id))
                 }),
+                'custom' === selectedTheme.id && /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(UXDivider, {}),
+                        /*#__PURE__*/ jsx(CustomThemeConfig, {}),
+                        /*#__PURE__*/ jsx(UXDivider, {})
+                    ]
+                }),
                 /*#__PURE__*/ jsx(UXDivider, {}),
                 /*#__PURE__*/ jsxs(VStack, {
                     gap: "md",

package/dist/components/UXThemeSwitch/use-color-scheme.js

@@ -1,11 +1,14 @@
-import { useTheme } from "./use-theme.js";
+import { useMemo } from "react";
+import { useThemeStore } from "./use-theme-store.js";
 const useColorScheme = ()=>{
-    const { theme } = useTheme();
-    const { colorScheme } = theme;
-    return {
-        colorScheme,
-        isDark: 'dark' === colorScheme,
-        isLight: 'light' === colorScheme
-    };
+    const { colorScheme } = useThemeStore((state)=>state.theme);
+    const scheme = useMemo(()=>({
+            colorScheme,
+            isDark: 'dark' === colorScheme,
+            isLight: 'light' === colorScheme
+        }), [
+        colorScheme
+    ]);
+    return scheme;
 };
 export { useColorScheme };

package/dist/components/UXThemeSwitch/use-theme-color.js

@@ -1,10 +1,14 @@
-import { useTheme } from "./use-theme.js";
+import { useMemo } from "react";
+import { useThemeStore } from "./use-theme-store.js";
 const useThemeColor = ()=>{
-    const { theme } = useTheme();
-    return {
-        ...theme.colorVariables,
-        transparent: 'transparent',
-        white: '#FFFFFF'
-    };
+    const { colorVariables } = useThemeStore((state)=>state.theme);
+    const themeColor = useMemo(()=>({
+            ...colorVariables,
+            transparent: 'transparent',
+            white: '#FFFFFF'
+        }), [
+        colorVariables
+    ]);
+    return themeColor;
 };
 export { useThemeColor };

package/dist/components/UXThemeSwitch/use-theme-store.js

@@ -20,7 +20,7 @@ const useThemeStore = create()(persist((set)=>({
             })
     }), {
     name: 'ux-preferences-theme',
-    version: 1,
+    version: 2,
     storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {}),
     partialize: (state)=>({
             theme: state.theme,

package/dist/components/UXThemeSwitch/use-theme.js

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { themeKeys } from "@particle-network/ui-shared";
+import { colorToCSSVariable, hexColorToHSLValue, themeKeys } from "@particle-network/ui-shared";
 import { useDebounceFn } from "ahooks";
 import { useThemeStore } from "./use-theme-store.js";
 const DEFAULT_FONT_FAMILY = 'Inter,system-ui,sans-serif,"Microsoft YaHei"';
@@ -14,13 +14,36 @@ const preloadFonts = ()=>{
     linkElement.href = PRELOAD_FONTS_URL;
     document.head.appendChild(linkElement);
 };
+const applyCustomThemeColors = (theme)=>{
+    if ('undefined' == typeof window) return;
+    const root = document.documentElement;
+    Object.entries(theme.colorVariables).forEach(([color, value])=>{
+        const cssVariable = colorToCSSVariable[color]?.self;
+        if (cssVariable) cssVariable.forEach((variable)=>{
+            root.style.setProperty(variable, hexColorToHSLValue(value));
+        });
+    });
+};
+const clearCustomThemeColors = ()=>{
+    if ('undefined' == typeof window) return;
+    const root = document.documentElement;
+    Object.values(colorToCSSVariable).forEach((cssVar)=>{
+        cssVar.self?.forEach((variable)=>{
+            root.style.removeProperty(variable);
+        });
+    });
+};
 const applyTheme = (theme)=>{
     if ('undefined' == typeof window) return;
     const root = document.documentElement;
     const isClassListCorrect = root.classList.contains(theme.id);
     const isDataThemeCorrect = root.getAttribute('data-theme') === theme.colorScheme;
     const isDataPrefersColorCorrect = root.getAttribute('data-prefers-color') === theme.colorScheme;
-    if (isClassListCorrect && isDataThemeCorrect && isDataPrefersColorCorrect) return;
+    if ('custom' === theme.id) {
+        clearCustomThemeColors();
+        applyCustomThemeColors(theme);
+    } else clearCustomThemeColors();
+    if (isClassListCorrect && isDataThemeCorrect && isDataPrefersColorCorrect && 'custom' !== theme.id) return;
     if (!isDataThemeCorrect) root.setAttribute('data-theme', theme.colorScheme);
     if (!isDataPrefersColorCorrect) root.setAttribute('data-prefers-color', theme.colorScheme);
     root.classList.remove('dark');
@@ -29,7 +52,7 @@ const applyTheme = (theme)=>{
         themeKeys.forEach((key)=>{
             root.classList.remove(key);
         });
-        root.classList.add(theme.id);
+        root.classList.add('custom' === theme.id ? theme.baseThemeId : theme.id);
     }
 };
 const extractFontFamilyFromLink = (link)=>{
@@ -97,6 +120,11 @@ const useTheme = ()=>{
         applyTheme(theme);
         debouncedApplyFont(fontUrl, theme.fontName);
     }, []);
+    useEffect(()=>{
+        applyTheme(theme);
+    }, [
+        theme
+    ]);
     const setTheme = (theme)=>{
         storeSetTheme(theme);
         applyTheme(theme);

package/dist/hooks/useI18n.d.ts

@@ -1,31 +1,119 @@
 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 categories: {
+                readonly basic: "Basic";
+                readonly background: "Background";
+                readonly text: "Text";
+                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 alert: "Signal Orange";
+                readonly gold: "Signal Yellow";
+            };
+        };
+    };
+    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 categories: {
+                readonly basic: "基础";
+                readonly background: "背景";
+                readonly text: "文字";
+                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 alert: "橙色信号";
+                readonly gold: "黄色信号";
             };
         };
     };
-    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,6 +24,35 @@ const en = {
                 show: 'Show example',
                 hide: 'Hide example'
             }
+        },
+        custom: {
+            title: 'Custom Theme',
+            preset: 'Theme Preset',
+            categories: {
+                basic: 'Basic',
+                background: 'Background',
+                text: 'Text',
+                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',
+                alert: 'Signal Orange',
+                gold: 'Signal Yellow'
+            }
         }
     },
     switch: {
@@ -54,6 +84,35 @@ const zh = {
                 show: '显示示例',
                 hide: '隐藏示例'
             }
+        },
+        custom: {
+            title: '自定义主题',
+            preset: '主题预设',
+            categories: {
+                basic: '基础',
+                background: '背景',
+                text: '文字',
+                signal: '信号'
+            },
+            colors: {
+                primary: '主要色',
+                bullish: '上涨色',
+                bearish: '下跌色',
+                'bg-default': '一级背景色',
+                'bg-200': '四级背景色',
+                'bg-300': '三级背景色',
+                'bg-400': '二级背景色',
+                overlay: '浮窗色',
+                default: '默认',
+                foreground: '一级文字色',
+                secondary: '二级文字色',
+                tertiary: '三级文字色',
+                divider: '分割线',
+                success: '绿色信号',
+                danger: '红色信号',
+                alert: '橙色信号',
+                gold: '黄色信号'
+            }
         }
     },
     switch: {
@@ -62,7 +121,10 @@ const zh = {
     }
 };
 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.2",
+  "version": "0.5.1-beta.4",
   "type": "module",
   "exports": {
     ".": {
@@ -48,10 +48,11 @@
   "dependencies": {
     "ahooks": "^3.9.4",
     "copy-to-clipboard": "^3.3.3",
+    "immer": "^11.1.3",
     "react-aria-components": "^1.14.0",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.5.1-beta.0",
-    "@particle-network/ui-shared": "0.4.0"
+    "@particle-network/ui-shared": "0.4.1-beta.0",
+    "@particle-network/icons": "0.5.1-beta.1"
   },
   "scripts": {
     "build": "rslib build",

package/tailwind-preset.js

@@ -1094,85 +1094,6 @@ module.exports = {
             },
           },
         },
-        'product-test': {
-          extend: 'dark',
-          colors: {
-            default: {
-              DEFAULT: '#222D33',
-              foreground: '#F6FEFD',
-            },
-            secondary: {
-              DEFAULT: '#D1D4DC',
-              foreground: '#000000',
-            },
-            tertiary: {
-              DEFAULT: '#949E9C',
-              foreground: '#000000',
-            },
-            primary: {
-              100: '#EFF5F5',
-              200: '#CEE6E4',
-              300: '#A8DBD6',
-              400: '#7ED4CB',
-              500: '#50D2C1',
-              600: '#34B9A5',
-              700: '#2B8C7C',
-              800: '#206255',
-              900: '#143831',
-              DEFAULT: '#50D2C1',
-              foreground: '#000000',
-            },
-            success: {
-              DEFAULT: '#19AB5E',
-              foreground: '#000000',
-            },
-            danger: {
-              DEFAULT: '#E84A5A',
-              foreground: '#000000',
-            },
-            alert: {
-              DEFAULT: '#F57733',
-              foreground: '#000000',
-            },
-            warning: {
-              DEFAULT: '#FFD13F',
-              foreground: '#000000',
-            },
-            gold: {
-              DEFAULT: '#FFB800',
-              foreground: '#000000',
-            },
-            overlay: {
-              DEFAULT: '#1B2429',
-              foreground: '#FFFFFF',
-            },
-            divider: {
-              DEFAULT: '#394145',
-              foreground: '#FFFFFF',
-            },
-            bullish: {
-              DEFAULT: '#D745FF',
-              foreground: '#000000',
-            },
-            bearish: {
-              DEFAULT: '#F38300',
-              foreground: '#000000',
-            },
-            background: {
-              200: '#222D33',
-              300: '#1B2429',
-              400: '#0F1A1F',
-              500: '#0A1318',
-              DEFAULT: '#0A1318',
-            },
-            foreground: {
-              100: '#949E9C',
-              300: '#D1D4DC',
-              500: '#F6FEFD',
-              DEFAULT: '#F6FEFD',
-            },
-          },
-        },
       },
       function({ addVariant, addComponents }) {
         addVariant('child', '& > *');