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

package/dist/components/ProgressWrapper/index.js

@@ -1,11 +1,10 @@
 'use client';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from "react";
-import { radiusMap } from "@particle-network/ui-shared";
+import { radiusMap, useThemeColor } from "@particle-network/ui-shared";
 import { useSize } from "ahooks";
 import { cn } from "../../utils/index.js";
 import { Center } from "../layout/index.js";
-import { useThemeColor } from "../UXThemeSwitch/use-theme-color.js";
 const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, svgClassName, ...restProps })=>{
     const uxColors = useThemeColor();
     const autoLayout = !width && !height;

package/dist/components/UXAutocomplete/index.js

@@ -3,10 +3,9 @@ import "react";
 import { Autocomplete, AutocompleteItem, AutocompleteSection } from "@heroui/autocomplete";
 import ChevronDownIcon from "@particle-network/icons/web/ChevronDownIcon";
 const UXAutocomplete = (props)=>{
-    const { fullWidth = false, classNames = {}, radius = 'sm', labelPlacement = 'outside-top', ...restProps } = props;
+    const { classNames = {}, radius = 'sm', labelPlacement = 'outside-top', ...restProps } = props;
     const { base, popoverContent, selectorButton, endContentWrapper, clearButton, listboxWrapper } = classNames;
     return /*#__PURE__*/ jsx(Autocomplete, {
-        fullWidth: fullWidth,
         classNames: {
             base: [
                 'ux-base',

package/dist/components/UXCheckbox/checkbox.extend.js

@@ -27,34 +27,37 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
         },
         size: {
             sm: {
+                base: 'gap-1.5',
                 wrapper: [
                     'w-3.5 h-3.5 me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.2)]',
                     'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-1',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
                 ],
-                label: '!text-body3 font-medium',
-                icon: 'h-2.5'
+                label: '!text-body2 font-medium',
+                icon: 'h-2'
             },
             md: {
+                base: 'gap-2',
                 wrapper: [
                     'w-4 h-4 me-0',
-                    'rounded-[calc(theme(borderRadius.medium)*0.2)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-1.5',
-                    'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
+                    'rounded-[calc(theme(borderRadius.medium)*0.3)]',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-secondary before:border-1.5',
+                    'after:rounded-[calc(theme(borderRadius.medium)*0.3)]'
                 ],
                 label: '!text-body2 font-medium',
-                icon: 'h-3'
+                icon: 'h-2.5'
             },
             lg: {
+                base: 'gap-2',
                 wrapper: [
                     'w-[18px] h-[18px] me-0',
-                    'rounded-[calc(theme(borderRadius.medium)*0.3)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-secondary before:border-1.5',
-                    'after:rounded-[calc(theme(borderRadius.medium)*0.3)]'
+                    'rounded-[calc(theme(borderRadius.medium)*0.4)]',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.4)] before:border-secondary before:border-1.5',
+                    'after:rounded-[calc(theme(borderRadius.medium)*0.4)]'
                 ],
                 label: '!text-body1 font-medium',
-                icon: 'h-3.5'
+                icon: 'h-3'
             }
         },
         radius: {
@@ -144,10 +147,10 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
         },
         labelPlacement: {
             left: {
-                base: 'flex-row-reverse gap-2'
+                base: 'flex-row-reverse'
             },
             right: {
-                base: 'flex-row gap-2'
+                base: 'flex-row'
             }
         }
     },

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

@@ -1,5 +1,5 @@
 'use client';
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ColorArea, ColorPicker, ColorSlider, ColorSwatch, ColorThumb, SliderTrack, parseColor } from "react-aria-components";
 import ColorPickerIcon from "@particle-network/icons/web/ColorPickerIcon";
@@ -12,11 +12,12 @@ 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, isDisabled, placement = 'bottom-start', value, defaultValue, onChange, onChangeEnd, onValueChange, onValueChangeEnd, isChanged, onReset })=>{
-    const { bg200: bg200 } = useThemeColor();
+const UXColorPicker = ({ className, isDisabled, isIconOnly, placement = 'bottom-start', value, defaultValue, onChange, onChangeEnd, onValueChange, onValueChangeEnd, isChanged, onReset })=>{
+    const colors = useThemeColor();
     const isControlled = void 0 !== value;
     const [pickerKey, setPickerKey] = useState(0);
     const [isInputFocused, setIsInputFocused] = useState(false);
+    const [isInteracting, setIsInteracting] = useState(false);
     const getInitialColor = ()=>{
         if (isControlled && value) return normalizeColor(value);
         if (defaultValue) return normalizeColor(defaultValue);
@@ -31,12 +32,13 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
         return parseColor('#000000');
     });
     const currentColor = useMemo(()=>{
-        if (isControlled && value) return normalizeColor(value);
+        if (isControlled && value && !isInteracting) return normalizeColor(value);
         return internalColor;
     }, [
         value,
         internalColor,
-        isControlled
+        isControlled,
+        isInteracting
     ]);
     useEffect(()=>{
         const initialColor = getInitialColor();
@@ -62,7 +64,10 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
     ]);
     const handleChange = useCallback((color)=>{
         if (color) {
-            setInternalColor(color);
+            if (isControlled) {
+                setInternalColor(color);
+                setIsInteracting(true);
+            } else setInternalColor(color);
             onChange?.(color);
             onValueChange?.(color.toString('hex'));
         }
@@ -86,6 +91,7 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
     ]);
     const handleChangeEnd = useCallback((color)=>{
         if (color) {
+            setIsInteracting(false);
             onChangeEnd?.(color);
             onValueChangeEnd?.(color.toString('hex'));
         }
@@ -123,12 +129,12 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
         handleChangeEnd
     ]);
     return /*#__PURE__*/ jsx(ColorPicker, {
-        value: value,
+        value: currentColor,
         defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
         onChange: handleChange,
         children: /*#__PURE__*/ jsxs(HStack, {
             gap: 2,
-            className: cn('rounded-small bg-background-200 px-md h-[30px] w-[8.5rem]', isDisabled && 'opacity-disabled', isInputFocused && 'ring-foreground ring-1', className),
+            className: cn(!isIconOnly && 'px-md rounded-small bg-background-200 h-[30px] w-[8.5rem]', isDisabled && 'opacity-disabled', isInputFocused && 'ring-foreground ring-1', className),
             children: [
                 /*#__PURE__*/ jsxs(UXPopover, {
                     placement: placement,
@@ -139,7 +145,7 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
                                 size: "auto",
                                 isDisabled: isDisabled,
                                 children: /*#__PURE__*/ jsx(ColorSwatch, {
-                                    className: cn('h-4 w-4 rounded-[4px]', internalColor.toString('hex') === bg200 && 'border-foreground/10 border')
+                                    className: cn('h-4 w-4 rounded-[4px]', internalColor.toString('hex') === colors.bg200 && 'border-foreground/10 border')
                                 })
                             })
                         }),
@@ -153,6 +159,7 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
                                         xChannel: "saturation",
                                         yChannel: "brightness",
                                         className: "aspect-square w-full overflow-hidden rounded-lg",
+                                        onChange: handleChange,
                                         onChangeEnd: handleChangeEnd,
                                         children: /*#__PURE__*/ jsx(ColorThumb, {
                                             className: "h-4 w-4 rounded-full border-2 border-white shadow-[0_2px_4px_rgba(0,0,0,0.2)]"
@@ -179,6 +186,7 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
                                                 className: "min-w-0 flex-1",
                                                 colorSpace: "hsl",
                                                 orientation: "horizontal",
+                                                onChange: handleChange,
                                                 onChangeEnd: handleChangeEnd,
                                                 children: /*#__PURE__*/ jsx(SliderTrack, {
                                                     className: "h-3 rounded-full",
@@ -191,7 +199,7 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
                                     }),
                                     /*#__PURE__*/ jsx(ColorFields, {
                                         defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
-                                        value: value,
+                                        value: currentColor,
                                         onChange: handleColorFieldsChange
                                     })
                                 ]
@@ -199,26 +207,30 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
                         })
                     ]
                 }),
-                /*#__PURE__*/ jsx(ColorInput, {
-                    isDisabled: isDisabled,
-                    inputClassName: "focus:ring-0 px-0 text-left flex-1 relative bg-transparent",
-                    value: value,
-                    defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
-                    onChange: handleColorFieldsChange,
-                    onFocus: ()=>setIsInputFocused(true),
-                    onBlur: ()=>setIsInputFocused(false)
-                }),
-                hasChanged ? /*#__PURE__*/ jsx(UXButton, {
-                    isIconOnly: true,
-                    "aria-label": "Reset color",
-                    isDisabled: isDisabled,
-                    size: "sm",
-                    variant: "light",
-                    color: "secondary",
-                    onPress: handleReset,
-                    children: /*#__PURE__*/ jsx(RefreshCcwIcon, {})
-                }) : /*#__PURE__*/ jsx("div", {
-                    className: "size-4 shrink-0"
+                !isIconOnly && /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(ColorInput, {
+                            isDisabled: isDisabled,
+                            inputClassName: "focus:ring-0 px-0 text-left flex-1 relative bg-transparent",
+                            value: currentColor,
+                            defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
+                            onChange: handleColorFieldsChange,
+                            onFocus: ()=>setIsInputFocused(true),
+                            onBlur: ()=>setIsInputFocused(false)
+                        }),
+                        hasChanged ? /*#__PURE__*/ jsx(UXButton, {
+                            isIconOnly: true,
+                            "aria-label": "Reset color",
+                            isDisabled: isDisabled,
+                            size: "sm",
+                            variant: "light",
+                            color: "secondary",
+                            onPress: handleReset,
+                            children: /*#__PURE__*/ jsx(RefreshCcwIcon, {})
+                        }) : /*#__PURE__*/ jsx("div", {
+                            className: "size-4 shrink-0"
+                        })
+                    ]
                 })
             ]
         })

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

@@ -42,6 +42,10 @@ export interface UXColorPickerProps {
      * Popover 位置
      */
     placement?: UXPopoverProps['placement'];
+    /**
+     * 是否只显示图标
+     */
+    isIconOnly?: boolean;
 }
 export interface ColorFieldsProps extends Pick<UXColorPickerProps, 'value' | 'defaultValue'> {
     /**

package/dist/components/UXHint/index.js

@@ -6,7 +6,7 @@ import { cn } from "../../utils/index.js";
 const UXHint = (props)=>{
     const { content, children, buttonClassName, iconClassName, triggerType = 'hover', ...restProps } = props;
     const renderTriggerContent = ()=>/*#__PURE__*/ jsx(Center, {
-            className: cn('size-4 cursor-pointer', buttonClassName),
+            className: cn('min-h-4 min-w-4 cursor-pointer', buttonClassName),
             children: /*#__PURE__*/ jsx(CircleQuestionIcon, {
                 size: 14,
                 className: iconClassName

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ModalProps } from '@heroui/modal';
-export type UXModalProps = Omit<ModalProps, 'closeButton'> & {
+export type UXModalProps = Omit<ModalProps, 'closeButton' | 'title'> & {
     title?: React.ReactNode;
     footer?: React.ReactNode;
     tip?: React.ReactNode;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { type UXNumberInputProps } from '../UXNumberInput';
+export interface UXRangeInputValue {
+    min?: number;
+    max?: number;
+}
+export type UXRangeInputProps = Omit<UXNumberInputProps, 'value' | 'defaultValue' | 'onValueChange' | 'minValue' | 'maxValue'> & {
+    asFragment?: boolean;
+    /**
+     * The current value of the range input (controlled)
+     */
+    value?: UXRangeInputValue;
+    /**
+     * The default value of the range input (uncontrolled)
+     */
+    defaultValue?: UXRangeInputValue;
+    /**
+     * The minimum value allowed for both inputs
+     */
+    minValue?: number;
+    /**
+     * The maximum value allowed for both inputs
+     */
+    maxValue?: number;
+    /**
+     * Props for the minimum input
+     */
+    minInputProps?: Partial<UXNumberInputProps>;
+    /**
+     * Props for the maximum input
+     */
+    maxInputProps?: Partial<UXNumberInputProps>;
+    /**
+     * Separator between the two inputs
+     */
+    separator?: React.ReactNode;
+    /**
+     * Callback fired when the value changes
+     */
+    onValueChange?: (value: UXRangeInputValue) => void;
+};
+export declare const UXRangeInput: React.FC<UXRangeInputProps>;

package/dist/components/UXRangeInput/index.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { Fragment, useCallback, useMemo } from "react";
+import { useI18n } from "../../hooks/index.js";
+import { HStack } from "../layout/index.js";
+import { UXNumberInput } from "../UXNumberInput/index.js";
+const UXRangeInput = (props)=>{
+    const { asFragment, value, defaultValue, onValueChange, minValue, maxValue, minInputProps = {}, maxInputProps = {}, separator = '', className, ...restProps } = props;
+    const i18n = useI18n();
+    const [internalValue, setInternalValue] = react.useState(defaultValue || {
+        min: void 0,
+        max: void 0
+    });
+    const currentValue = void 0 !== value ? value : internalValue;
+    const handleMinChange = useCallback((newMin)=>{
+        const minValue = isNaN(newMin) ? 0 : newMin;
+        const newValue = {
+            min: minValue,
+            max: currentValue.max
+        };
+        if (void 0 !== currentValue.max && !isNaN(currentValue.max) && minValue > currentValue.max) newValue.max = minValue;
+        if (void 0 === value) setInternalValue(newValue);
+        onValueChange?.(newValue);
+    }, [
+        currentValue.max,
+        value,
+        onValueChange
+    ]);
+    const handleMaxChange = useCallback((newMax)=>{
+        const maxValue = isNaN(newMax) ? 0 : newMax;
+        const newValue = {
+            min: currentValue.min,
+            max: maxValue
+        };
+        if (void 0 !== currentValue.min && !isNaN(currentValue.min) && maxValue < currentValue.min) newValue.min = maxValue;
+        if (void 0 === value) setInternalValue(newValue);
+        onValueChange?.(newValue);
+    }, [
+        currentValue.min,
+        value,
+        onValueChange
+    ]);
+    const minInputMaxValue = useMemo(()=>{
+        if (void 0 !== currentValue.max && !isNaN(currentValue.max)) return currentValue.max;
+        return maxValue;
+    }, [
+        currentValue.max,
+        maxValue
+    ]);
+    const maxInputMinValue = useMemo(()=>{
+        if (void 0 !== currentValue.min && !isNaN(currentValue.min)) return currentValue.min;
+        return minValue;
+    }, [
+        currentValue.min,
+        minValue
+    ]);
+    const Wrapper = asFragment ? Fragment : HStack;
+    return /*#__PURE__*/ jsxs(Wrapper, {
+        gap: 2,
+        className: className,
+        children: [
+            /*#__PURE__*/ jsx(UXNumberInput, {
+                startContent: /*#__PURE__*/ jsx("span", {
+                    className: "shrink-0",
+                    "aria-hidden": "true",
+                    children: i18n.rangeInput.min
+                }),
+                textAlign: "right",
+                ...restProps,
+                ...minInputProps,
+                value: currentValue.min,
+                minValue: minValue,
+                maxValue: minInputMaxValue,
+                onValueChange: handleMinChange
+            }),
+            separator,
+            /*#__PURE__*/ jsx(UXNumberInput, {
+                startContent: /*#__PURE__*/ jsx("span", {
+                    className: "shrink-0",
+                    "aria-hidden": "true",
+                    children: i18n.rangeInput.max
+                }),
+                textAlign: "right",
+                ...restProps,
+                ...maxInputProps,
+                value: currentValue.max,
+                minValue: maxInputMinValue,
+                maxValue: maxValue,
+                onValueChange: handleMaxChange
+            })
+        ]
+    });
+};
+UXRangeInput.displayName = 'UX.RangeInput';
+export { UXRangeInput };

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

@@ -1,2 +1,5 @@
 import React from 'react';
-export declare const CustomThemeConfig: React.FC;
+export interface CustomThemeConfigProps {
+    colorChangeMode?: 'drag' | 'dragEnd';
+}
+export declare const CustomThemeConfig: React.FC<CustomThemeConfigProps>;

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

@@ -46,7 +46,7 @@ const COLOR_CATEGORIES = {
         'blue'
     ]
 };
-const CustomThemeConfig = ()=>{
+const CustomThemeConfig = ({ colorChangeMode = 'dragEnd' })=>{
     const { lang } = useLang();
     const i18n = useI18n();
     const { theme, setTheme, setCustomTheme } = useTheme();
@@ -102,9 +102,10 @@ const CustomThemeConfig = ()=>{
                     children: label
                 }),
                 /*#__PURE__*/ jsx(UXColorPicker, {
-                    value: value,
+                    defaultValue: value,
                     isChanged: isCustomized,
-                    onValueChange: (newValue)=>handleColorChange(color, newValue),
+                    onValueChange: 'drag' === colorChangeMode ? (newValue)=>handleColorChange(color, newValue) : void 0,
+                    onValueChangeEnd: 'dragEnd' === colorChangeMode ? (newValue)=>handleColorChange(color, newValue) : void 0,
                     onReset: ()=>handleColorChange(color, baseTheme.colorVariables[color])
                 })
             ]

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

@@ -1,4 +1,4 @@
+import { useColorScheme, useThemeColor, useThemeStore } from '@particle-network/ui-shared';
 export * from './theme-switch';
-export * from './use-color-scheme';
 export * from './use-theme';
-export * from './use-theme-color';
+export { useColorScheme, useThemeColor, useThemeStore };

package/dist/components/UXThemeSwitch/index.js

@@ -1,4 +1,4 @@
+import { useColorScheme, useThemeColor, useThemeStore } from "@particle-network/ui-shared";
 export * from "./theme-switch.js";
-export * from "./use-color-scheme.js";
 export * from "./use-theme.js";
-export * from "./use-theme-color.js";
+export { useColorScheme, useThemeColor, useThemeStore };

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

@@ -162,8 +162,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                         'custom' === id ? /*#__PURE__*/ jsxs(Fragment, {
                             children: [
                                 /*#__PURE__*/ jsx("g", {
-                                    "clip-path": "url(#paint0_angular_48986_280686_clip_path)",
-                                    "data-figma-skip-parse": "true",
+                                    clipPath: "url(#paint0_angular_48986_280686_clip_path)",
                                     children: /*#__PURE__*/ jsx("g", {
                                         transform: "matrix(0 0.011 -0.011 0 39 51)",
                                         children: /*#__PURE__*/ jsx("foreignObject", {
@@ -188,7 +187,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                     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"
+                                    strokeWidth: "0.483303"
                                 }),
                                 /*#__PURE__*/ jsx("defs", {
                                     children: /*#__PURE__*/ jsx("clipPath", {
@@ -197,7 +196,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                             cx: "39",
                                             cy: "51",
                                             r: "10.7583",
-                                            "stroke-width": "0.483303"
+                                            strokeWidth: "0.483303"
                                         })
                                     })
                                 })

package/dist/components/UXThemeSwitch/theme-switch.d.ts

@@ -4,9 +4,16 @@ import { type UXModalProps } from '../UXModal';
 export interface UXThemeSwitchModalProps extends Pick<UXModalProps, 'isOpen' | 'onClose' | 'onOpenChange' | 'backdrop'> {
     as?: 'modal' | 'drawer';
     omitThemes?: ThemeId[];
+    /**
+     * 颜色改变模式
+     * - drag: 拖动时改变颜色
+     * - dragEnd: 拖动停止时改变颜色
+     * @default dragEnd
+     */
+    colorChangeMode?: 'drag' | 'dragEnd';
 }
 export declare const UXThemeSwitchModal: React.FC<UXThemeSwitchModalProps>;
-export interface UXThemeSwitchProps extends Pick<UXThemeSwitchModalProps, 'as' | 'omitThemes' | 'backdrop'> {
+export interface UXThemeSwitchProps extends Pick<UXThemeSwitchModalProps, 'as' | 'omitThemes' | 'backdrop' | 'colorChangeMode'> {
     children?: (onOpen: () => void) => React.ReactNode;
 }
 export declare const UXThemeSwitch: React.FC<UXThemeSwitchProps>;

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

@@ -1,8 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useDisclosure } from "@heroui/use-disclosure";
 import { ChartColorSwitchIcon, CopyIcon } from "@particle-network/icons/web";
-import { DEFAULT_THEME_ID, themeData } from "@particle-network/ui-shared";
+import { themeData } from "@particle-network/ui-shared";
 import { useI18n } from "../../hooks/index.js";
 import { cn } from "../../utils/index.js";
 import { HStack, VStack } from "../layout/index.js";
@@ -32,27 +32,19 @@ const FONT_EXAMPLES = [
         url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'
     }
 ];
-const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, onClose, onOpenChange })=>{
+const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, onClose, onOpenChange, colorChangeMode })=>{
     const i18n = useI18n();
-    const { theme: selectedTheme, customTheme: savedCustomTheme, setTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
+    const { theme: selectedTheme, customTheme: savedCustomTheme, setTheme, initTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
     const [isFontExampleOpen, setIsFontExampleOpen] = useState(false);
+    useEffect(()=>{
+        initTheme();
+    }, []);
     const Component = 'modal' === as ? UXModal : UXDrawer;
     const themes = useMemo(()=>themeData.filter((theme)=>!omitThemes.includes(theme.id)), [
         omitThemes
     ]);
     const handleThemeSelect = (theme)=>{
-        if ('custom' === theme.id) if (savedCustomTheme) setTheme(savedCustomTheme);
-        else {
-            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);
+        'custom' === theme.id ? setTheme(savedCustomTheme) : setTheme(theme);
     };
     return /*#__PURE__*/ jsx(Component, {
         isOpen: isOpen,
@@ -83,7 +75,9 @@ const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, o
                 'custom' === selectedTheme.id && /*#__PURE__*/ jsxs(Fragment, {
                     children: [
                         /*#__PURE__*/ jsx(UXDivider, {}),
-                        /*#__PURE__*/ jsx(CustomThemeConfig, {})
+                        /*#__PURE__*/ jsx(CustomThemeConfig, {
+                            colorChangeMode: colorChangeMode
+                        })
                     ]
                 }),
                 /*#__PURE__*/ jsx(UXDivider, {}),

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

@@ -6,10 +6,11 @@ export declare const useTheme: () => {
     theme: ThemeItemType;
     customTheme: ThemeItemType;
     setTheme: (theme: ThemeItemType) => void;
+    initTheme: () => void;
     setCustomTheme: (customTheme: ThemeItemType) => void;
     fontUrl: string;
     setFontUrl: (link: string) => void;
     clearFontUrl: () => void;
-    fontLoadStatus: import("./use-theme-store").FontLoadStatus;
+    fontLoadStatus: import("@particle-network/ui-shared").FontLoadStatus;
     fontName: string;
 };

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

@@ -1,6 +1,5 @@
-import { useEffect } from "react";
+import { useThemeStore } from "@particle-network/ui-shared";
 import { useDebounceFn } from "ahooks";
-import { useThemeStore } from "./use-theme-store.js";
 import { applyFont, applyTheme, extractFontFamilyFromLink, preloadFonts } from "./utils.js";
 const useTheme = ()=>{
     const theme = useThemeStore((state)=>state.theme);
@@ -42,16 +41,11 @@ const useTheme = ()=>{
     const { run: debouncedApplyFont } = useDebounceFn((customFontLink, themeFontName)=>applyFontWithStatus(customFontLink, themeFontName), {
         wait: 300
     });
-    useEffect(()=>{
+    const initTheme = ()=>{
         preloadFonts();
         applyTheme(theme);
         debouncedApplyFont(fontUrl, theme.fontName);
-    }, []);
-    useEffect(()=>{
-        applyTheme(theme);
-    }, [
-        theme
-    ]);
+    };
     const setTheme = (theme)=>{
         storeSetTheme(theme);
         applyTheme(theme);
@@ -71,6 +65,7 @@ const useTheme = ()=>{
         theme,
         customTheme,
         setTheme,
+        initTheme,
         setCustomTheme: storeSetCustomTheme,
         fontUrl,
         setFontUrl,