@particle-network/ui-react 0.5.1-beta.8 → 0.6.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 { cn } from "@heroui/theme";
-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-input.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import { ColorField, Input } from "react-aria-components";
-import { cn } from "@heroui/theme";
+import { cn } from "../../utils/index.js";
 const inputClassName = 'w-full h-[30px] rounded-small border-none bg-background-200 px-2.5 text-tiny text-foreground focus:outline-none focus:ring-1 focus:ring-foreground text-center';
 const ColorInput = (props)=>/*#__PURE__*/ jsx(ColorField, {
         ...props,

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

@@ -1,10 +1,10 @@
 '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 { cn } from "@heroui/theme";
 import ColorPickerIcon from "@particle-network/icons/web/ColorPickerIcon";
 import RefreshCcwIcon from "@particle-network/icons/web/RefreshCcwIcon";
+import { cn } from "../../utils/index.js";
 import { HStack } from "../layout/index.js";
 import { UXButton } from "../UXButton/index.js";
 import { UXPopover, UXPopoverContent, UXPopoverTrigger } from "../UXPopover/index.js";
@@ -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 { 'bg-200': 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/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";

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)=>{

package/dist/components/UXHint/index.js

@@ -1,12 +1,12 @@
 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, {
-            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/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.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { cn } from "@heroui/theme";
+import { cn } from "../../utils/index.js";
 import { Square } from "../layout/index.js";
 import { SpinnerIcon } from "./SpinnerIcon.js";
 const UXSpinner = ({ size = 18, duration = 400, className, iconClassName, style, ...restProps })=>{

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/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

@@ -17,10 +17,10 @@ const COLOR_CATEGORIES = {
         'bearish'
     ],
     background: [
-        'bg-default',
-        'bg-400',
-        'bg-300',
-        'bg-200',
+        'bgDefault',
+        'bg400',
+        'bg300',
+        'bg200',
         'cursor',
         'overlay',
         'divider'
@@ -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

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { cn } from "@heroui/theme";
 import { useLang } from "../../hooks/index.js";
+import { cn } from "../../utils/index.js";
 import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { useTheme } from "./use-theme.js";
@@ -57,7 +57,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                 fill: "currentColor",
                                 className: "text-background",
                                 style: {
-                                    color: 'custom' === id ? customColors['bg-default'] : void 0
+                                    color: 'custom' === id ? customColors.bgDefault : void 0
                                 }
                             })
                         }),
@@ -72,7 +72,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                 fill: "currentColor",
                                 className: "text-background",
                                 style: {
-                                    color: 'custom' === id ? customColors['bg-default'] : void 0
+                                    color: 'custom' === id ? customColors.bgDefault : void 0
                                 }
                             })
                         }),
@@ -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"
                                         })
                                     })
                                 })