@particle-network/ui-react 0.5.1-beta.14 → 0.5.1-beta.15

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

@@ -17,6 +17,7 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
     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,7 +129,7 @@ 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, {
@@ -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
                                     })
                                 ]
@@ -202,7 +210,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 bg-transparent",
-                    value: value,
+                    value: currentColor,
                     defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
                     onChange: handleColorFieldsChange,
                     onFocus: ()=>setIsInputFocused(true),

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

@@ -32,7 +32,7 @@ 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, initTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
     const [isFontExampleOpen, setIsFontExampleOpen] = useState(false);
@@ -75,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.5.1-beta.14",
+  "version": "0.5.1-beta.15",
   "type": "module",
   "exports": {
     ".": {
@@ -52,8 +52,8 @@
     "react-aria-components": "^1.14.0",
     "values.js": "^2.1.1",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.5.1-beta.6",
-    "@particle-network/ui-shared": "0.4.1-beta.5"
+    "@particle-network/ui-shared": "0.4.1-beta.5",
+    "@particle-network/icons": "0.5.1-beta.6"
   },
   "scripts": {
     "build": "rslib build",