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

package/dist/components/ProgressWrapper/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type UXForegroundColor, type UXRadius } from '@particle-network/ui-shared';
+import { type HexColor, type UXComponentColor, type UXRadius } from '@particle-network/ui-shared';
 export interface ProgressWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * 进度 (%)
@@ -24,7 +24,7 @@ export interface ProgressWrapperProps extends React.HTMLAttributes<HTMLDivElemen
     /**
      * 进度条颜色
      */
-    color?: UXForegroundColor | 'transparent' | `#${string}`;
+    color?: UXComponentColor | 'transparent' | HexColor;
     /**
      * 进度条 SVG 样式
      */

package/dist/components/UXButton/button.js

@@ -5,7 +5,7 @@ import { UXSpinner } from "../UXSpinner/index.js";
 import { useButton } from "./use-button.js";
 const Button = forwardRef((props, ref)=>{
     const { Component, domRef, children, spinnerSize, spinner = /*#__PURE__*/ jsx(UXSpinner, {
-        color: "currentColor",
+        color: "current",
         size: spinnerSize
     }), spinnerPlacement, startContent, endContent, isLoading, disableRipple, getButtonProps, getRippleProps, isIconOnly } = useButton({
         ...props,

package/dist/components/UXChip/chip.extend.d.ts

@@ -1,7 +1,8 @@
 import type React from 'react';
 import { type ChipProps } from '@heroui/chip';
+import type { HexColor } from '@particle-network/ui-shared';
 type ExtendedChipProps = Omit<ChipProps, 'color'> & {
-    color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'alert' | 'danger' | 'bullish' | 'bearish' | `#${string}`;
+    color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'alert' | 'danger' | 'bullish' | 'bearish' | HexColor;
 };
 declare const ExtendedChip: React.ForwardRefExoticComponent<ExtendedChipProps>;
 export default ExtendedChip;

package/dist/components/UXChip/index.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import ExtendedChip from './chip.extend';
 export type UXChipProps = React.ComponentPropsWithRef<typeof ExtendedChip>;
 export declare const UXChip: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", Omit<import("@heroui/chip").ChipProps, "color"> & {
-    color?: "default" | "primary" | "secondary" | "success" | "warning" | "alert" | "danger" | "bullish" | "bearish" | `#${string}`;
+    color?: "default" | "primary" | "secondary" | "success" | "warning" | "alert" | "danger" | "bullish" | "bearish" | import("@particle-network/ui-shared").HexColor;
 }, never>;

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

@@ -201,7 +201,7 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
                 }),
                 /*#__PURE__*/ jsx(ColorInput, {
                     isDisabled: isDisabled,
-                    inputClassName: "focus:ring-0 px-0 text-left flex-1 relative h-7",
+                    inputClassName: "focus:ring-0 px-0 text-left flex-1 relative bg-transparent",
                     value: value,
                     defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
                     onChange: handleColorFieldsChange,

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

@@ -27,7 +27,7 @@ export interface UXColorPickerProps {
      */
     onValueChangeEnd?: (color: string) => void;
     /**
-     * 是否已改变
+     * 是否已改变（展示 reset 按钮）
      */
     isChanged?: boolean;
     /**

package/dist/components/UXInput/index.d.ts

@@ -7,9 +7,9 @@ export declare const UXInput: React.ForwardRefExoticComponent<(Omit<Omit<import(
     variant?: "flat" | "bordered" | undefined;
     textAlign?: "center" | "left" | "right" | undefined;
     isColorText?: boolean | undefined;
-    color?: "default" | "success" | "secondary" | "primary" | "danger" | "warning" | "bullish" | "bearish" | undefined;
+    color?: "secondary" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
+    radius?: "full" | "sm" | "md" | "lg" | "none" | undefined;
     labelPlacement?: "inside" | undefined;
     fullWidth?: boolean | undefined;
     isClearable?: boolean | undefined;
@@ -23,9 +23,9 @@ export declare const UXInput: React.ForwardRefExoticComponent<(Omit<Omit<import(
     variant?: "flat" | "bordered" | undefined;
     textAlign?: "center" | "left" | "right" | undefined;
     isColorText?: boolean | undefined;
-    color?: "default" | "success" | "secondary" | "primary" | "danger" | "warning" | "bullish" | "bearish" | undefined;
+    color?: "secondary" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
+    radius?: "full" | "sm" | "md" | "lg" | "none" | undefined;
     labelPlacement?: "inside" | undefined;
     fullWidth?: boolean | undefined;
     isClearable?: boolean | undefined;

package/dist/components/UXInput/input.extend.d.ts

@@ -4,9 +4,9 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<(Omit<imp
     variant?: "flat" | "bordered" | undefined;
     textAlign?: "center" | "left" | "right" | undefined;
     isColorText?: boolean | undefined;
-    color?: "default" | "success" | "secondary" | "primary" | "danger" | "warning" | "bullish" | "bearish" | undefined;
+    color?: "secondary" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
+    radius?: "full" | "sm" | "md" | "lg" | "none" | undefined;
     labelPlacement?: "inside" | undefined;
     fullWidth?: boolean | undefined;
     isClearable?: boolean | undefined;
@@ -20,9 +20,9 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<(Omit<imp
     variant?: "flat" | "bordered" | undefined;
     textAlign?: "center" | "left" | "right" | undefined;
     isColorText?: boolean | undefined;
-    color?: "default" | "success" | "secondary" | "primary" | "danger" | "warning" | "bullish" | "bearish" | undefined;
+    color?: "secondary" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    radius?: "sm" | "md" | "lg" | "none" | "full" | undefined;
+    radius?: "full" | "sm" | "md" | "lg" | "none" | undefined;
     labelPlacement?: "inside" | undefined;
     fullWidth?: boolean | undefined;
     isClearable?: boolean | undefined;

package/dist/components/UXSpinner/spinner.d.ts

@@ -1,15 +1,11 @@
 import React from 'react';
-import { type UXForegroundColor } from '@particle-network/ui-shared';
 import { type SquareProps } from '../layout';
 export interface UXSpinnerProps extends SquareProps {
-    /**
-     * 颜色
-     */
-    color?: UXForegroundColor | 'currentColor';
     /**
      * 动画持续时间(毫秒)
      * @default 400
      */
     duration?: number;
+    iconClassName?: string;
 }
 export declare const UXSpinner: React.FC<UXSpinnerProps>;

package/dist/components/UXSpinner/spinner.js

@@ -1,13 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "@heroui/theme";
-import { colorToClassName } from "@particle-network/ui-shared";
 import { Square } from "../layout/index.js";
 import { SpinnerIcon } from "./SpinnerIcon.js";
-const UXSpinner = ({ size = 18, color = 'primary', duration = 400, className, style, ...restProps })=>{
+const UXSpinner = ({ size = 18, duration = 400, className, iconClassName, style, ...restProps })=>{
     const [currentIndex, setCurrentIndex] = useState(0);
     const animationRef = useRef(null);
-    const iconClassName = 'currentColor' === color ? void 0 : colorToClassName[color];
     useEffect(()=>{
         const stepDuration = duration / 12;
         const animate = ()=>{
@@ -23,6 +21,7 @@ const UXSpinner = ({ size = 18, color = 'primary', duration = 400, className, st
     ]);
     return /*#__PURE__*/ jsx(Square, {
         size: size,
+        color: "primary",
         className: cn('inline-flex', className),
         style: style,
         ...restProps,

package/dist/components/UXSwitch/index.d.ts

@@ -4,14 +4,14 @@ export type UXSwitchProps = React.ComponentPropsWithRef<typeof ExtendedSwitch>;
 export declare const UXSwitch: React.ForwardRefExoticComponent<(Omit<Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("@heroui/switch").SwitchProps> & import("@heroui/switch").SwitchProps & {
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
-    color?: "success" | "primary" | "danger" | "warning" | "bullish" | "bearish" | "contrast" | undefined;
+    color?: "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "contrast" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     isDisabled?: boolean | undefined;
     disableAnimation?: boolean | undefined;
 }, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<Omit<any, "ref">, never>, keyof import("@heroui/switch").SwitchProps> & import("@heroui/switch").SwitchProps & {
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
-    color?: "success" | "primary" | "danger" | "warning" | "bullish" | "bearish" | "contrast" | undefined;
+    color?: "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "contrast" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     isDisabled?: boolean | undefined;
     disableAnimation?: boolean | undefined;

package/dist/components/UXSwitch/switch.extend.d.ts

@@ -1,14 +1,14 @@
 declare const ExtendedSwitch: import("react").ForwardRefExoticComponent<(Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("@heroui/switch").SwitchProps> & import("@heroui/switch").SwitchProps & {
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
-    color?: "success" | "primary" | "danger" | "warning" | "bullish" | "bearish" | "contrast" | undefined;
+    color?: "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "contrast" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     isDisabled?: boolean | undefined;
     disableAnimation?: boolean | undefined;
 }, "ref"> | Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<Omit<any, "ref">, never>, keyof import("@heroui/switch").SwitchProps> & import("@heroui/switch").SwitchProps & {
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
-    color?: "success" | "primary" | "danger" | "warning" | "bullish" | "bearish" | "contrast" | undefined;
+    color?: "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "contrast" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     isDisabled?: boolean | undefined;
     disableAnimation?: boolean | undefined;

package/dist/components/UXTable/index.d.ts

@@ -16,7 +16,7 @@ export declare const UXTable: import("@heroui/system-rsc").InternalForwardRefRen
     isSelectable?: boolean | undefined;
     isMultiSelectable?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    align?: "start" | "end" | "center" | undefined;
+    align?: "center" | "start" | "end" | undefined;
 }, "ref"> | Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<Omit<any, "ref">, never>, keyof import("@heroui/table").TableProps<object>> & import("@heroui/table").TableProps<object> & {
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
@@ -32,6 +32,6 @@ export declare const UXTable: import("@heroui/system-rsc").InternalForwardRefRen
     isSelectable?: boolean | undefined;
     isMultiSelectable?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    align?: "start" | "end" | "center" | undefined;
+    align?: "center" | "start" | "end" | undefined;
 }, "ref">) & React.RefAttributes<HTMLElement>, never>;
 export { TableBody as UXTableBody, TableCell as UXTableCell, TableColumn as UXTableColumn, TableHeader as UXTableHeader, TableRow as UXTableRow, } from '@heroui/table';

package/dist/components/UXTable/table.extend.d.ts

@@ -13,7 +13,7 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<(Omit<imp
     isSelectable?: boolean | undefined;
     isMultiSelectable?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    align?: "start" | "end" | "center" | undefined;
+    align?: "center" | "start" | "end" | undefined;
 }, "ref"> | Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<Omit<any, "ref">, never>, keyof import("@heroui/table").TableProps<object>> & import("@heroui/table").TableProps<object> & {
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
@@ -29,6 +29,6 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<(Omit<imp
     isSelectable?: boolean | undefined;
     isMultiSelectable?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    align?: "start" | "end" | "center" | undefined;
+    align?: "center" | "start" | "end" | undefined;
 }, "ref">) & import("react").RefAttributes<HTMLElement>>;
 export default ExtendedTable;

package/dist/components/UXThemeSwitch/constants.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 默认字体
+ */
+export declare const DEFAULT_FONT_FAMILY = "Inter,system-ui,sans-serif,\"Microsoft YaHei\"";
+/**
+ * 预加载所有主题字体的 Google Fonts CSS
+ * 包含所有可能用到的字体，一次性加载，避免切换主题时重复加载
+ */
+export declare const PRELOAD_FONTS_URL = "https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap";

package/dist/components/UXThemeSwitch/constants.js

@@ -0,0 +1,3 @@
+const DEFAULT_FONT_FAMILY = 'Inter,system-ui,sans-serif,"Microsoft YaHei"';
+const PRELOAD_FONTS_URL = 'https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap';
+export { DEFAULT_FONT_FAMILY, PRELOAD_FONTS_URL };

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

@@ -5,6 +5,7 @@ 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 { UXButton } from "../UXButton/index.js";
 import { UXColorPicker } from "../UXColorPicker/index.js";
 import { UXSelect, UXSelectItem } from "../UXSelect/index.js";
 import { UXTab, UXTabs } from "../UXTabs/index.js";
@@ -28,17 +29,25 @@ const COLOR_CATEGORIES = {
         'secondary',
         'tertiary'
     ],
+    candle: [
+        'candleUp',
+        'candleBorderUp',
+        'candleWickUp',
+        'candleDown',
+        'candleBorderDown',
+        'candleWickDown'
+    ],
     signal: [
         'success',
         'danger',
-        'alert',
-        'gold'
+        'warning',
+        'alert'
     ]
 };
 const CustomThemeConfig = ()=>{
     const { lang } = useLang();
     const i18n = useI18n();
-    const { theme, setTheme } = useTheme();
+    const { theme, setTheme, setCustomTheme } = 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), [
@@ -46,18 +55,38 @@ const CustomThemeConfig = ()=>{
     ]);
     const handleBaseThemeChange = (themeId)=>{
         const selectedBaseTheme = themeData.find((t)=>t.id === themeId);
-        if (selectedBaseTheme) setTheme({
-            ...theme,
-            baseThemeId: themeId,
-            colorScheme: selectedBaseTheme.colorScheme,
-            colorVariables: selectedBaseTheme.colorVariables
-        });
+        if (selectedBaseTheme) {
+            const updatedTheme = {
+                ...theme,
+                baseThemeId: themeId,
+                colorScheme: selectedBaseTheme.colorScheme,
+                colorVariables: selectedBaseTheme.colorVariables
+            };
+            setTheme(updatedTheme);
+            setCustomTheme(updatedTheme);
+        }
     };
     const handleColorChange = (color, value)=>{
         const updatedTheme = produce(theme, (draft)=>{
             draft.colorVariables[color] = value;
         });
         setTheme(updatedTheme);
+        setCustomTheme(updatedTheme);
+    };
+    const handleSwapUpDown = ()=>{
+        const updatedTheme = produce(theme, (draft)=>{
+            const { bullish, bearish, candleUp, candleDown, candleWickUp, candleWickDown, candleBorderUp, candleBorderDown } = draft.colorVariables;
+            draft.colorVariables.bullish = bearish;
+            draft.colorVariables.bearish = bullish;
+            draft.colorVariables.candleUp = candleDown;
+            draft.colorVariables.candleDown = candleUp;
+            draft.colorVariables.candleWickUp = candleWickDown;
+            draft.colorVariables.candleWickDown = candleWickUp;
+            draft.colorVariables.candleBorderUp = candleBorderDown;
+            draft.colorVariables.candleBorderDown = candleBorderUp;
+        });
+        setTheme(updatedTheme);
+        setCustomTheme(updatedTheme);
     };
     const getColorValue = (color)=>theme.colorVariables[color] || baseTheme.colorVariables[color] || '#000000';
     const renderColorItem = (color, label)=>{
@@ -82,12 +111,20 @@ const CustomThemeConfig = ()=>{
     return /*#__PURE__*/ jsxs(VStack, {
         gap: "lg",
         children: [
-            /*#__PURE__*/ jsx(HStack, {
+            /*#__PURE__*/ jsxs(HStack, {
                 justify: "between",
-                children: /*#__PURE__*/ jsx(Text, {
-                    body1Bold: true,
-                    children: i18n.theme.custom.title
-                })
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        body1Bold: true,
+                        children: i18n.theme.custom.title
+                    }),
+                    /*#__PURE__*/ jsx(UXButton, {
+                        variant: "text",
+                        color: "primary",
+                        onPress: handleSwapUpDown,
+                        children: i18n.theme.custom.swapUpDown
+                    })
+                ]
             }),
             /*#__PURE__*/ jsxs(HStack, {
                 justify: "between",
@@ -120,7 +157,7 @@ const CustomThemeConfig = ()=>{
                             gap: "md",
                             className: "pt-md",
                             children: colors.map((color)=>{
-                                const label = i18n.theme.custom.colors[color] || color;
+                                const label = i18n.colors[color] || color;
                                 return renderColorItem(color, label);
                             })
                         })

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

@@ -4,8 +4,11 @@ import { cn } from "@heroui/theme";
 import { useLang } from "../../hooks/index.js";
 import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
+import { useTheme } from "./use-theme.js";
 const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
     const { lang } = useLang();
+    const { customTheme } = useTheme();
+    const customColors = customTheme.colorVariables;
     return /*#__PURE__*/ jsxs(VStack, {
         gap: 2,
         items: "center",
@@ -13,7 +16,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
         onClick: onClick,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: cn('rounded-medium border-2 transition-all duration-300 hover:scale-105', 'h-[59px] w-[100px] md:h-[71px] md:w-[120px]', isSelected ? 'border-primary' : 'border-transparent'),
+                className: cn('rounded-medium border-2 border-transparent transition-all duration-300 hover:scale-105', 'h-[59px] w-[100px] md:h-[71px] md:w-[120px]', isSelected && 'border-primary'),
+                style: {
+                    borderColor: isSelected && 'custom' === id ? customColors.primary : void 0
+                },
                 children: /*#__PURE__*/ jsxs("svg", {
                     xmlns: "http://www.w3.org/2000/svg",
                     viewBox: "0 0 120 71",
@@ -27,7 +33,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "67",
                             rx: "5",
                             fill: "currentColor",
-                            className: "text-primary"
+                            className: "text-primary",
+                            style: {
+                                color: 'custom' === id ? customColors.primary : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("mask", {
                             id: "mask0_40928_218196",
@@ -46,7 +55,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                 height: "67",
                                 rx: "5",
                                 fill: "currentColor",
-                                className: "text-background"
+                                className: "text-background",
+                                style: {
+                                    color: 'custom' === id ? customColors['bg-default'] : void 0
+                                }
                             })
                         }),
                         /*#__PURE__*/ jsx("g", {
@@ -58,7 +70,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                 height: "67",
                                 rx: "6",
                                 fill: "currentColor",
-                                className: "text-background"
+                                className: "text-background",
+                                style: {
+                                    color: 'custom' === id ? customColors['bg-default'] : void 0
+                                }
                             })
                         }),
                         /*#__PURE__*/ jsx("rect", {
@@ -67,7 +82,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             width: "100",
                             height: "1",
                             fill: "currentColor",
-                            className: "text-divider"
+                            className: "text-divider",
+                            style: {
+                                color: 'custom' === id ? customColors.divider : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "54.082",
@@ -76,7 +94,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "6.01835",
                             rx: "3.00917",
                             fill: "currentColor",
-                            className: "text-foreground"
+                            className: "text-foreground",
+                            style: {
+                                color: 'custom' === id ? customColors.foreground : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "54.082",
@@ -85,7 +106,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "6.01835",
                             rx: "3.00917",
                             fill: "currentColor",
-                            className: "text-bullish"
+                            className: "text-bullish",
+                            style: {
+                                color: 'custom' === id ? customColors.bullish : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "75.8994",
@@ -94,7 +118,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "6.01835",
                             rx: "3.00917",
                             fill: "currentColor",
-                            className: "text-bearish"
+                            className: "text-bearish",
+                            style: {
+                                color: 'custom' === id ? customColors.bearish : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "86.4316",
@@ -103,7 +130,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "6.01835",
                             rx: "3.00917",
                             fill: "currentColor",
-                            className: "text-secondary"
+                            className: "text-secondary",
+                            style: {
+                                color: 'custom' === id ? customColors.secondary : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "94.707",
@@ -112,7 +142,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "6.01835",
                             rx: "3.00917",
                             fill: "currentColor",
-                            className: "text-secondary"
+                            className: "text-secondary",
+                            style: {
+                                color: 'custom' === id ? customColors.secondary : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "102.981",
@@ -121,7 +154,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "6.01835",
                             rx: "3.00917",
                             fill: "currentColor",
-                            className: "text-secondary"
+                            className: "text-secondary",
+                            style: {
+                                color: 'custom' === id ? customColors.secondary : void 0
+                            }
                         }),
                         'custom' === id ? /*#__PURE__*/ jsxs(Fragment, {
                             children: [

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

@@ -34,14 +34,15 @@ const FONT_EXAMPLES = [
 ];
 const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, onClose, onOpenChange })=>{
     const i18n = useI18n();
-    const { theme: selectedTheme, setTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
+    const { theme: selectedTheme, customTheme: savedCustomTheme, setTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
     const [isFontExampleOpen, setIsFontExampleOpen] = useState(false);
     const Component = 'modal' === as ? UXModal : UXDrawer;
     const themes = useMemo(()=>themeData.filter((theme)=>!omitThemes.includes(theme.id)), [
         omitThemes
     ]);
     const handleThemeSelect = (theme)=>{
-        if ('custom' === theme.id && 'custom' !== selectedTheme.id) {
+        if ('custom' === theme.id) if (savedCustomTheme) setTheme(savedCustomTheme);
+        else {
             const baseTheme = themeData.find((t)=>t.id === DEFAULT_THEME_ID) || themeData["0"];
             const customTheme = {
                 ...theme,
@@ -50,7 +51,8 @@ const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, o
                 colorVariables: baseTheme.colorVariables
             };
             setTheme(customTheme);
-        } else setTheme(theme);
+        }
+        else setTheme(theme);
     };
     return /*#__PURE__*/ jsx(Component, {
         isOpen: isOpen,
@@ -81,8 +83,7 @@ const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, o
                 'custom' === selectedTheme.id && /*#__PURE__*/ jsxs(Fragment, {
                     children: [
                         /*#__PURE__*/ jsx(UXDivider, {}),
-                        /*#__PURE__*/ jsx(CustomThemeConfig, {}),
-                        /*#__PURE__*/ jsx(UXDivider, {})
+                        /*#__PURE__*/ jsx(CustomThemeConfig, {})
                     ]
                 }),
                 /*#__PURE__*/ jsx(UXDivider, {}),

package/dist/components/UXThemeSwitch/use-theme-color.d.ts

@@ -1,22 +1 @@
-export declare const useThemeColor: () => {
-    transparent: string;
-    white: string;
-    default: string;
-    alert: string;
-    success: string;
-    foreground: string;
-    secondary: string;
-    tertiary: string;
-    primary: string;
-    danger: string;
-    warning: string;
-    gold: string;
-    bullish: string;
-    bearish: string;
-    "bg-default": string;
-    "bg-300": string;
-    "bg-200": string;
-    "bg-400": string;
-    divider: string;
-    overlay: string;
-};
+export declare const useThemeColor: () => Record<import("@particle-network/ui-shared").ThemeColorVariable, string>;

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

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

package/dist/components/UXThemeSwitch/use-theme-store.d.ts

@@ -5,6 +5,10 @@ interface State {
      * 保存的主题
      */
     theme: ThemeItemType;
+    /**
+     * 保存的自定义主题配置（当切换到其他主题时保存，切回 custom 时恢复）
+     */
+    customTheme: ThemeItemType;
     /**
      * 保存的字体链接
      */
@@ -20,6 +24,7 @@ interface State {
 }
 interface Actions {
     setTheme: (theme: ThemeItemType) => void;
+    setCustomTheme: (customTheme: ThemeItemType) => void;
     setFontUrl: (fontUrl: string) => void;
     setFontLoadStatus: (status: FontLoadStatus) => void;
     setFontName: (name: string) => void;