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

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

@@ -0,0 +1,51 @@
+import type { Color } from 'react-stately';
+import type { UXPopoverProps } from '../UXPopover';
+export interface UXColorPickerProps {
+    className?: string;
+    /**
+     * 颜色值（受控）
+     */
+    value?: string | Color;
+    /**
+     * 默认颜色值（非受控）
+     */
+    defaultValue?: string | Color;
+    /**
+     * 颜色变化回调（拖拽时调用）
+     */
+    onChange?: (color: Color) => void;
+    /**
+     * 颜色变化结束回调（释放时调用）
+     */
+    onChangeEnd?: (color: Color) => void;
+    /**
+     * HEX 格式颜色变化回调（拖拽时调用）
+     */
+    onValueChange?: (color: string) => void;
+    /**
+     * HEX 格式颜色变化结束回调（释放时调用）
+     */
+    onValueChangeEnd?: (color: string) => void;
+    /**
+     * 是否已改变（展示 reset 按钮）
+     */
+    isChanged?: boolean;
+    /**
+     * 重置回调
+     */
+    onReset?: () => void;
+    /**
+     * 是否禁用
+     */
+    isDisabled?: boolean;
+    /**
+     * Popover 位置
+     */
+    placement?: UXPopoverProps['placement'];
+}
+export interface ColorFieldsProps extends Pick<UXColorPickerProps, 'value' | 'defaultValue'> {
+    /**
+     * 颜色变化回调
+     */
+    onChange?: (color: Color | null) => void;
+}

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

@@ -0,0 +1,7 @@
+import type { Color } from 'react-stately';
+/**
+ * 将颜色值（string 或 Color）标准化为 Color 对象
+ * @param colorValue - 颜色值，可以是字符串或 Color 对象
+ * @returns Color 对象
+ */
+export declare function normalizeColor(colorValue: string | Color | undefined | null): Color;

package/dist/components/UXColorPicker/utils.js

@@ -0,0 +1,6 @@
+import { parseColor } from "react-aria-components";
+function normalizeColor(colorValue) {
+    if (!colorValue) return parseColor('#000000');
+    return 'string' == typeof colorValue ? parseColor(colorValue) : colorValue;
+}
+export { normalizeColor };

package/dist/components/UXCopy/index.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import react from "react";
-import { cn } from "@heroui/theme";
 import CopyIcon from "@particle-network/icons/web/CopyIcon";
 import copy_to_clipboard from "copy-to-clipboard";
 import { useI18n } from "../../hooks/useI18n.js";
+import { cn } from "../../utils/index.js";
 import { toast } from "../UXToast/index.js";
 import { UXTooltip } from "../UXTooltip/index.js";
 import { shortAddress } from "./utils.js";
@@ -39,7 +39,7 @@ const Address = ({ children, copyText = children, tooltipContent = children, sta
         toastText: `${i18n.copy.address}${children}`,
         ...props,
         children: /*#__PURE__*/ jsxs("div", {
-            className: "flex items-center gap-1 hover:opacity-70 text-body2 font-medium",
+            className: "text-body2 flex items-center gap-1 font-medium hover:opacity-70",
             children: [
                 startContent,
                 shortAddress(children),

package/dist/components/UXEmpty/index.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { forwardRef } from "@heroui/system";
-import { cn } from "@heroui/theme";
 import EmptyIcon from "@particle-network/icons/web/EmptyIcon";
 import { useI18n } from "../../hooks/useI18n.js";
+import { cn } from "../../utils/index.js";
 import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 const UXEmpty = forwardRef((props, ref)=>{
@@ -13,7 +13,7 @@ const UXEmpty = forwardRef((props, ref)=>{
         ref: ref,
         center: true,
         gap: 1,
-        className: cn('w-full h-full', className),
+        className: cn('h-full w-full', className),
         ...restProps,
         children: [
             /*#__PURE__*/ jsx(EmptyIcon, {

package/dist/components/UXHint/index.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { cn } from "@heroui/theme";
 import CircleQuestionIcon from "@particle-network/icons/web/CircleQuestionIcon";
 import { Center, UXPopover, UXPopoverContent, UXPopoverTrigger, UXTooltip } from "../index.js";
+import { cn } from "../../utils/index.js";
 const UXHint = (props)=>{
     const { content, children, buttonClassName, iconClassName, triggerType = 'hover', ...restProps } = props;
     const renderTriggerContent = ()=>/*#__PURE__*/ jsx(Center, {

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

@@ -5,11 +5,11 @@ export declare const UXInput: React.ForwardRefExoticComponent<(Omit<Omit<import(
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
     variant?: "flat" | "bordered" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "right" | "left" | "center" | 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;
@@ -21,11 +21,11 @@ export declare const UXInput: React.ForwardRefExoticComponent<(Omit<Omit<import(
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
     variant?: "flat" | "bordered" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "right" | "left" | "center" | 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

@@ -2,11 +2,11 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<(Omit<imp
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
     variant?: "flat" | "bordered" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "right" | "left" | "center" | 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;
@@ -18,11 +18,11 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<(Omit<imp
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
     variant?: "flat" | "bordered" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "right" | "left" | "center" | 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/UXRadio/radio.extend.js

@@ -40,21 +40,21 @@ const ExtendedRadio = extendVariants(Radio, {
             sm: {
                 wrapper: 'w-2.5 h-2.5 border-small',
                 control: 'w-1.5 h-1.5',
-                labelWrapper: 'ml-sm',
+                labelWrapper: 'ms-1',
                 label: '!text-body3 font-medium',
                 description: 'text-tiny text-foreground-100'
             },
             md: {
                 wrapper: 'w-3 h-3 border-small',
                 control: 'w-1.5 h-1.5',
-                labelWrapper: 'ml-2',
+                labelWrapper: 'ms-1',
                 label: '!text-body2 font-medium',
                 description: 'text-tiny text-foreground-100'
             },
             lg: {
                 wrapper: 'w-[14px] h-[14px] border-small',
                 control: 'w-2 h-2',
-                labelWrapper: 'ml-2',
+                labelWrapper: 'ms-1',
                 label: '!text-body1 font-medium',
                 description: 'text-small text-foreground-100'
             }

package/dist/components/UXSlider/use-slider.d.ts

@@ -134,7 +134,7 @@ interface Props extends HTMLHeroUIProps {
 export type UseSliderProps = Omit<Props, keyof ValueBase<SliderValue>> & AriaSliderProps & SliderVariantProps;
 export declare function useSlider(originalProps: UseSliderProps): {
     Component: import("@heroui/system-rsc").As<any>;
-    state: import("@react-stately/slider").SliderState;
+    state: import("react-stately").SliderState;
     value: any;
     domRef: React.RefObject<HTMLElement>;
     label: React.ReactNode;

package/dist/components/UXSlider/use-slider.js

@@ -2,11 +2,11 @@ import { useCallback, useMemo, useRef } from "react";
 import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
 import { mergeProps, objectToDeps, warn } from "@heroui/shared-utils";
 import { mapPropsVariants, useProviderContext } from "@heroui/system";
-import { cn } from "@heroui/theme";
 import { useLocale, useNumberFormatter } from "@react-aria/i18n";
 import { useHover } from "@react-aria/interactions";
 import { useSlider } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
+import { cn } from "../../utils/index.js";
 import { slider } from "./slider-theme.js";
 function use_slider_useSlider(originalProps) {
     const globalContext = useProviderContext();

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 { cn } from "../../utils/index.js";
 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/UXSwitch/switch.extend.js

@@ -48,9 +48,9 @@ const ExtendedSwitch = extendVariants(Switch, {
         },
         size: {
             sm: {
-                wrapper: 'w-5 h-3 px-0.5',
+                wrapper: 'w-5 h-3 px-0.5 bg-cursor',
                 thumb: [
-                    'w-2 h-2 text-tiny',
+                    'w-2 h-2 text-tiny shadow-none',
                     'group-data-[selected=true]:ms-2'
                 ],
                 endContent: 'text-tiny',
@@ -58,9 +58,9 @@ const ExtendedSwitch = extendVariants(Switch, {
                 label: 'text-body3 font-medium ms-sm'
             },
             md: {
-                wrapper: 'w-6 h-3.5 px-[3px]',
+                wrapper: 'w-6 h-3.5 px-[3px] bg-cursor',
                 thumb: [
-                    'w-2.5 h-2.5 text-small',
+                    'w-2.5 h-2.5 text-small shadow-none',
                     'group-data-[selected=true]:ms-2'
                 ],
                 endContent: 'text-small',
@@ -68,9 +68,9 @@ const ExtendedSwitch = extendVariants(Switch, {
                 label: 'text-body3 font-medium ms-sm'
             },
             lg: {
-                wrapper: 'w-[34px] h-5 px-[3px]',
+                wrapper: 'w-[34px] h-5 px-[3px] bg-cursor',
                 thumb: [
-                    'w-3.5 h-3.5 text-medium',
+                    'w-3.5 h-3.5 text-medium shadow-none',
                     'group-data-[selected=true]:ms-3.5'
                 ],
                 endContent: 'text-medium',

package/dist/components/UXTabs/tabs.classes.js

@@ -252,9 +252,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-tertiary dark:bg-tertiary'
+                    'bg-cursor dark:bg-cursor'
                 ],
-                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
+                tabContent: 'group-data-[selected=true]:text-cursor-foreground'
             }
         },
         {
@@ -264,9 +264,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-tertiary'
+                    'bg-cursor'
                 ],
-                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
+                tabContent: 'group-data-[selected=true]:text-cursor-foreground'
             }
         },
         {

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.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,171 @@
+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 { 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";
+import { useTheme } from "./use-theme.js";
+const COLOR_CATEGORIES = {
+    basic: [
+        'primary',
+        'bullish',
+        'bearish'
+    ],
+    background: [
+        'bgDefault',
+        'bg400',
+        'bg300',
+        'bg200',
+        'cursor',
+        'overlay',
+        'divider'
+    ],
+    text: [
+        'foreground',
+        'secondary',
+        'tertiary'
+    ],
+    candle: [
+        'candleUp',
+        'candleBorderUp',
+        'candleWickUp',
+        'candleDown',
+        'candleBorderDown',
+        'candleWickDown'
+    ],
+    signal: [
+        'success',
+        'danger',
+        'warning',
+        'alert',
+        'blue'
+    ]
+};
+const CustomThemeConfig = ()=>{
+    const { lang } = useLang();
+    const i18n = useI18n();
+    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), [
+        baseThemeId
+    ]);
+    const handleBaseThemeChange = (themeId)=>{
+        const selectedBaseTheme = themeData.find((t)=>t.id === themeId);
+        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)=>{
+        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__*/ jsxs(HStack, {
+                justify: "between",
+                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",
+                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.colors[color] || color;
+                                return renderColorItem(color, label);
+                            })
+                        })
+                    }, category))
+            })
+        ]
+    });
+};
+export { CustomThemeConfig };