@particle-network/ui-react 0.5.1-beta.1 → 0.5.1-beta.3

package/dist/components/UXButton/button-theme.js

@@ -618,31 +618,67 @@ const button_theme_button = tv({
         },
         {
             isIconOnly: true,
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
             size: 'xs',
             class: 'min-w-5 w-5 h-5'
         },
         {
             isIconOnly: true,
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
             size: 'sm',
             class: 'min-w-6 w-6 h-6'
         },
         {
             isIconOnly: true,
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
             size: 'md',
             class: 'min-w-[30px] w-[30px] h-[30px]'
         },
         {
             isIconOnly: true,
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
             size: 'lg',
             class: 'min-w-9 w-9 h-9'
         },
         {
             isIconOnly: true,
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
             size: 'xl',
             class: 'min-w-11 w-11 h-11'
         },
         {
             isIconOnly: true,
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
             size: 'auto',
             class: ''
         },

package/dist/components/UXColorPicker/color-fields.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ColorFieldsProps } from './types';
+export declare const ColorFields: React.FC<ColorFieldsProps>;

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

@@ -0,0 +1,142 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Switch3Icon } from "@particle-network/icons/web";
+import { Flex, VStack } from "../layout/index.js";
+import { Text } from "../typography/Text.js";
+import { UXButton } from "../UXButton/index.js";
+import { ColorInput } from "./color-input.js";
+const ColorFields = ({ value, defaultValue, onChange })=>{
+    const [format, setFormat] = useState('hex');
+    const handleFormatToggle = useCallback(()=>{
+        const formats = [
+            'hex',
+            'rgb',
+            'hsl'
+        ];
+        const currentIndex = formats.indexOf(format);
+        const nextIndex = (currentIndex + 1) % formats.length;
+        setFormat(formats[nextIndex]);
+    }, [
+        format
+    ]);
+    return /*#__PURE__*/ jsxs(Flex, {
+        gap: "md",
+        children: [
+            'hex' === format && /*#__PURE__*/ jsxs(VStack, {
+                gap: 1,
+                className: "flex-1",
+                children: [
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        className: "w-full",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "HEX"
+                    })
+                ]
+            }),
+            'rgb' === format && /*#__PURE__*/ jsxs("div", {
+                className: "grid flex-1 grid-cols-3 gap-1",
+                children: [
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        channel: "red",
+                        className: "w-full",
+                        colorSpace: "rgb",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        channel: "green",
+                        className: "w-full",
+                        colorSpace: "rgb",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        channel: "blue",
+                        className: "w-full",
+                        colorSpace: "rgb",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "R"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "G"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "B"
+                    })
+                ]
+            }),
+            'hsl' === format && /*#__PURE__*/ jsxs("div", {
+                className: "grid flex-1 grid-cols-3 gap-1",
+                children: [
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        channel: "hue",
+                        className: "w-full",
+                        colorSpace: "hsl",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        channel: "saturation",
+                        className: "w-full",
+                        colorSpace: "hsl",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        channel: "lightness",
+                        className: "w-full",
+                        colorSpace: "hsl",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "H"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "S"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "L"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(UXButton, {
+                isIconOnly: true,
+                className: "shrink-0",
+                variant: "light",
+                onPress: handleFormatToggle,
+                children: /*#__PURE__*/ jsx(Switch3Icon, {})
+            })
+        ]
+    });
+};
+ColorFields.displayName = 'ColorInputFields';
+export { ColorFields };

package/dist/components/UXColorPicker/color-input.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type ColorFieldProps } from 'react-aria-components';
+interface ColorInputProps extends ColorFieldProps {
+    inputClassName?: string;
+}
+export declare const ColorInput: React.FC<ColorInputProps>;
+export {};

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

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { ColorField, Input } from "react-aria-components";
+import { cn } from "@heroui/theme";
+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,
+        children: /*#__PURE__*/ jsx(Input, {
+            className: cn(inputClassName, props.inputClassName)
+        })
+    });
+export { ColorInput };

package/dist/components/UXColorPicker/color-picker.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UXColorPickerProps } from './types';
+export declare const UXColorPicker: React.FC<UXColorPickerProps>;

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

@@ -0,0 +1,222 @@
+'use client';
+import { 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 { HStack } from "../layout/index.js";
+import { UXButton } from "../UXButton/index.js";
+import { UXPopover, UXPopoverContent, UXPopoverTrigger } from "../UXPopover/index.js";
+import { ColorFields } from "./color-fields.js";
+import { ColorInput } from "./color-input.js";
+import { normalizeColor } from "./utils.js";
+const UXColorPicker = ({ className, value, defaultValue, onChange, onChangeEnd, onValueChange, onValueChangeEnd, isDisabled, placement = 'bottom-start' })=>{
+    const isControlled = void 0 !== value;
+    const [pickerKey, setPickerKey] = useState(0);
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    const getInitialColor = ()=>{
+        if (isControlled && value) return normalizeColor(value);
+        if (defaultValue) return normalizeColor(defaultValue);
+        return parseColor('#000000');
+    };
+    const initialColorRef = useRef(getInitialColor());
+    const [internalColor, setInternalColor] = useState(()=>{
+        if (isControlled) {
+            if (value) return normalizeColor(value);
+        }
+        if (defaultValue) return normalizeColor(defaultValue);
+        return parseColor('#000000');
+    });
+    const currentColor = useMemo(()=>{
+        if (isControlled && value) return normalizeColor(value);
+        return internalColor;
+    }, [
+        value,
+        internalColor,
+        isControlled
+    ]);
+    useEffect(()=>{
+        const initialColor = getInitialColor();
+        initialColorRef.current = initialColor;
+    }, []);
+    useEffect(()=>{
+        if (!isControlled && defaultValue) {
+            const newColor = normalizeColor(defaultValue);
+            setInternalColor(newColor);
+        }
+    }, [
+        defaultValue,
+        isControlled
+    ]);
+    useEffect(()=>{
+        if (isControlled && value) {
+            const newColor = normalizeColor(value);
+            setInternalColor(newColor);
+        }
+    }, [
+        value,
+        isControlled
+    ]);
+    const handleChange = useCallback((color)=>{
+        if (color) {
+            setInternalColor(color);
+            onChange?.(color);
+            onValueChange?.(color.toString('hex'));
+        }
+    }, [
+        onChange,
+        onValueChange,
+        isControlled
+    ]);
+    const handleEyedropper = useCallback(()=>{
+        if ('EyeDropper' in window) {
+            const eyeDropper = new window.EyeDropper();
+            eyeDropper.open().then((result)=>{
+                try {
+                    const newColor = parseColor(result.sRGBHex);
+                    if (newColor) handleChange(newColor);
+                } catch  {}
+            }).catch(()=>{});
+        } else console.warn('EyeDropper API is not supported in this browser');
+    }, [
+        handleChange
+    ]);
+    const handleChangeEnd = useCallback((color)=>{
+        if (color) {
+            onChangeEnd?.(color);
+            onValueChangeEnd?.(color.toString('hex'));
+        }
+    }, [
+        onChangeEnd,
+        onValueChangeEnd
+    ]);
+    const hasChanged = useMemo(()=>{
+        const initialHex = initialColorRef.current.toString('hex');
+        const currentHex = currentColor.toString('hex');
+        return initialHex !== currentHex;
+    }, [
+        currentColor
+    ]);
+    const handleReset = ()=>{
+        const resetColor = initialColorRef.current;
+        if (!isControlled) {
+            setInternalColor(resetColor);
+            setPickerKey((prev)=>prev + 1);
+        }
+        onChange?.(resetColor);
+        onValueChange?.(resetColor.toString('hex'));
+        onChangeEnd?.(resetColor);
+        onValueChangeEnd?.(resetColor.toString('hex'));
+    };
+    const handleColorFieldsChange = useCallback((color)=>{
+        if (!color) return;
+        handleChange(color);
+        handleChangeEnd(color);
+    }, [
+        handleChange,
+        handleChangeEnd
+    ]);
+    return /*#__PURE__*/ jsx(ColorPicker, {
+        value: value,
+        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),
+            children: [
+                /*#__PURE__*/ jsxs(UXPopover, {
+                    placement: placement,
+                    children: [
+                        /*#__PURE__*/ jsx(UXPopoverTrigger, {
+                            children: /*#__PURE__*/ jsx(UXButton, {
+                                size: "auto",
+                                isDisabled: isDisabled,
+                                children: /*#__PURE__*/ jsx(ColorSwatch, {
+                                    className: "h-4 w-4 rounded-sm border-none"
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(UXPopoverContent, {
+                            className: "p-3",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: cn('flex w-[240px] flex-col gap-3'),
+                                children: [
+                                    /*#__PURE__*/ jsx(ColorArea, {
+                                        colorSpace: "hsb",
+                                        xChannel: "saturation",
+                                        yChannel: "brightness",
+                                        className: "aspect-square w-full overflow-hidden rounded-lg",
+                                        onChangeEnd: handleChangeEnd,
+                                        children: /*#__PURE__*/ jsx(ColorThumb, {
+                                            className: "border-1 h-2 w-2 rounded-full border-white shadow-[0_0_0_0.5px_black,inset_0_0_0_0.5px_black]"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs(HStack, {
+                                        gap: "md",
+                                        items: "center",
+                                        children: [
+                                            'EyeDropper' in window && /*#__PURE__*/ jsx(UXButton, {
+                                                isIconOnly: true,
+                                                "aria-label": "Pick color from screen",
+                                                size: "sm",
+                                                variant: "light",
+                                                color: "secondary",
+                                                onPress: handleEyedropper,
+                                                children: /*#__PURE__*/ jsx(ColorPickerIcon, {})
+                                            }),
+                                            /*#__PURE__*/ jsx(ColorSwatch, {
+                                                className: "h-6 w-6 shrink-0 rounded-full"
+                                            }),
+                                            /*#__PURE__*/ jsx(ColorSlider, {
+                                                channel: "hue",
+                                                className: "min-w-0 flex-1",
+                                                colorSpace: "hsl",
+                                                orientation: "horizontal",
+                                                onChangeEnd: handleChangeEnd,
+                                                children: /*#__PURE__*/ jsx(SliderTrack, {
+                                                    className: "h-3 rounded-full",
+                                                    children: /*#__PURE__*/ jsx(ColorThumb, {
+                                                        className: "top-[50%] z-10 h-4 w-4 rounded-full border-2 border-white"
+                                                    })
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(ColorFields, {
+                                        defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
+                                        value: value,
+                                        onChange: handleColorFieldsChange
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(ColorInput, {
+                    isDisabled: isDisabled,
+                    inputClassName: "focus:ring-0 px-0 text-left flex-1",
+                    value: value,
+                    defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
+                    onChange: (color)=>handleChange(color),
+                    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"
+                })
+            ]
+        })
+    }, isControlled ? void 0 : pickerKey);
+};
+UXColorPicker.displayName = 'UXColorPicker';
+export { UXColorPicker };

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

@@ -0,0 +1,5 @@
+import { parseColor } from 'react-aria-components';
+import type { Color } from 'react-stately';
+export { UXColorPicker } from './color-picker';
+export type * from './types';
+export { type Color, parseColor };

package/dist/components/UXColorPicker/index.js

@@ -0,0 +1,3 @@
+import { parseColor } from "react-aria-components";
+import { UXColorPicker } from "./color-picker.js";
+export { UXColorPicker, parseColor };

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

@@ -0,0 +1,40 @@
+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;
+    /**
+     * 是否禁用
+     */
+    isDisabled?: boolean;
+    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

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

@@ -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/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/UXThemeSwitch/theme-item.js

@@ -13,7 +13,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
         onClick: onClick,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: cn('rounded-medium border-2 hover:scale-105 transition-all duration-300', 'w-[100px] h-[59px] md:w-[120px] md:h-[71px]', isSelected ? 'border-primary' : 'border-transparent'),
+                className: cn('rounded-medium border-2 transition-all duration-300 hover:scale-105', 'h-[59px] w-[100px] md:h-[71px] md:w-[120px]', isSelected ? 'border-primary' : 'border-transparent'),
                 children: /*#__PURE__*/ jsxs("svg", {
                     xmlns: "http://www.w3.org/2000/svg",
                     viewBox: "0 0 120 71",

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

@@ -137,7 +137,7 @@ const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, o
                                     placement: "bottom",
                                     children: /*#__PURE__*/ jsxs(Text, {
                                         color: "secondary",
-                                        className: "flex-1 truncate cursor-pointer",
+                                        className: "flex-1 cursor-pointer truncate",
                                         children: [
                                             example.title,
                                             ": ",

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

@@ -1,11 +1,14 @@
-import { useTheme } from "./use-theme.js";
+import { useMemo } from "react";
+import { useThemeStore } from "./use-theme-store.js";
 const useColorScheme = ()=>{
-    const { theme } = useTheme();
-    const { colorScheme } = theme;
-    return {
-        colorScheme,
-        isDark: 'dark' === colorScheme,
-        isLight: 'light' === colorScheme
-    };
+    const { colorScheme } = useThemeStore((state)=>state.theme);
+    const scheme = useMemo(()=>({
+            colorScheme,
+            isDark: 'dark' === colorScheme,
+            isLight: 'light' === colorScheme
+        }), [
+        colorScheme
+    ]);
+    return scheme;
 };
 export { useColorScheme };

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

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

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

@@ -19,7 +19,8 @@ const useThemeStore = create()(persist((set)=>({
                 fontName
             })
     }), {
-    name: 'ux-theme-3',
+    name: 'ux-preferences-theme',
+    version: 1,
     storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {}),
     partialize: (state)=>({
             theme: state.theme,

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './UXButton';
 export * from './UXCalendar';
 export * from './UXCheckbox';
 export * from './UXChip';
+export * from './UXColorPicker';
 export * from './UXCopy';
 export * from './UXDatePicker';
 export * from './UXDateRangePicker';

package/dist/components/index.js

@@ -6,6 +6,7 @@ export * from "./UXButton/index.js";
 export * from "./UXCalendar/index.js";
 export * from "./UXCheckbox/index.js";
 export * from "./UXChip/index.js";
+export * from "./UXColorPicker/index.js";
 export * from "./UXCopy/index.js";
 export * from "./UXDatePicker/index.js";
 export * from "./UXDateRangePicker/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.5.1-beta.1",
+  "version": "0.5.1-beta.3",
   "type": "module",
   "exports": {
     ".": {
@@ -38,8 +38,8 @@
     "@rslib/core": "^0.12.3",
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
-    "@particle-network/lintstaged-config": "0.1.0",
-    "@particle-network/eslint-config": "0.3.0"
+    "@particle-network/eslint-config": "0.3.0",
+    "@particle-network/lintstaged-config": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -48,8 +48,9 @@
   "dependencies": {
     "ahooks": "^3.9.4",
     "copy-to-clipboard": "^3.3.3",
+    "react-aria-components": "^1.14.0",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.5.0",
+    "@particle-network/icons": "0.5.1-beta.0",
     "@particle-network/ui-shared": "0.4.0"
   },
   "scripts": {