@particle-network/ui-react 0.3.0-beta.8 → 0.3.0

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

@@ -33,11 +33,11 @@ const button_theme_button = tv({
             text: 'bg-transparent min-w-0 w-auto h-auto px-0'
         },
         size: {
-            xs: 'gap-2 rounded-small !text-body3 min-w-min font-medium [&_[aria-label="Loading"]>div]:size-3',
-            sm: 'gap-2 rounded-small !text-body3 min-w-min font-medium [&_[aria-label="Loading"]>div]:size-3',
-            md: 'gap-2 rounded-small text-tiny min-w-min font-medium [&_[aria-label="Loading"]>div]:size-4',
-            lg: 'gap-2 rounded-medium text-medium min-w-min font-medium [&_[aria-label="Loading"]>div]:size-6',
-            auto: 'min-w-min rounded-medium'
+            xs: 'gap-2 rounded-[6px] !text-body3 min-w-min font-medium [&_[aria-label="Loading"]>div]:size-3',
+            sm: 'gap-2 rounded-[6px] !text-body3 min-w-min font-medium [&_[aria-label="Loading"]>div]:size-3',
+            md: 'gap-2 rounded-[6px] text-tiny min-w-min font-medium [&_[aria-label="Loading"]>div]:size-4',
+            lg: 'gap-2 rounded-[10px] text-medium min-w-min font-medium [&_[aria-label="Loading"]>div]:size-6',
+            auto: 'min-w-min rounded-[10px]'
         },
         color: {
             default: '',
@@ -52,10 +52,10 @@ const button_theme_button = tv({
         },
         radius: {
             none: 'rounded-none',
-            xs: 'rounded-sm',
-            sm: 'rounded-small',
-            md: 'rounded-medium',
-            lg: 'rounded-large',
+            xs: 'rounded-[4px]',
+            sm: 'rounded-[6px]',
+            md: 'rounded-[10px]',
+            lg: 'rounded-[14px]',
             full: 'rounded-full'
         },
         fullWidth: {

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

@@ -0,0 +1,21 @@
+import React from 'react';
+interface CommonProps {
+    className?: string;
+    copyText?: string | number;
+    toastText?: string;
+    withTooltip?: boolean;
+    tooltipContent?: string;
+}
+interface UXCopyProps extends CommonProps {
+    children: React.ReactElement;
+}
+interface AddressProps extends CommonProps {
+    startContent?: React.ReactNode;
+    withCopyIcon?: boolean;
+    children: string;
+}
+export declare const UXCopy: React.FC<UXCopyProps> & {
+    Address: React.FC<AddressProps>;
+};
+export declare const Address: React.FC<AddressProps>;
+export {};

package/dist/components/UXCopy/index.js

@@ -0,0 +1,54 @@
+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 { toast } from "../UXToast/index.js";
+import { UXTooltip } from "../UXTooltip/index.js";
+import { shortAddress } from "./utils.js";
+const UXCopy = ({ className, copyText, toastText, withTooltip, tooltipContent, children })=>{
+    const i18n = useI18n();
+    const handleCopy = ()=>{
+        try {
+            copy_to_clipboard(String(copyText));
+            toast.success(toastText || i18n.copy.success);
+        } catch (error) {
+            toast.error(`${i18n.copy.error}${error instanceof Error ? error.message : String(error)}`);
+        }
+    };
+    const childrenWithProps = /*#__PURE__*/ react.cloneElement(children, {
+        onClick: handleCopy
+    });
+    return /*#__PURE__*/ jsx(UXTooltip, {
+        isDisabled: !withTooltip,
+        content: tooltipContent || i18n.copy.copy,
+        placement: "bottom",
+        children: /*#__PURE__*/ jsx("span", {
+            className: cn('cursor-pointer', className),
+            children: childrenWithProps
+        })
+    });
+};
+const Address = ({ children, copyText = children, tooltipContent = children, startContent, withCopyIcon, ...props })=>{
+    const i18n = useI18n();
+    return /*#__PURE__*/ jsx(UXCopy, {
+        tooltipContent: tooltipContent,
+        copyText: copyText,
+        toastText: `${i18n.copy.address}${children}`,
+        ...props,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "flex items-center gap-1 hover:opacity-70 text-body2 font-medium",
+            children: [
+                startContent,
+                shortAddress(children),
+                withCopyIcon && /*#__PURE__*/ jsx(CopyIcon, {
+                    size: 14
+                })
+            ]
+        })
+    });
+};
+UXCopy.displayName = 'UXCopy';
+UXCopy.Address = Address;
+export { Address, UXCopy };

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

@@ -0,0 +1 @@
+export declare const shortAddress: (address: string | undefined | null, chars?: number, endChars?: number) => string;

package/dist/components/UXCopy/utils.js

@@ -0,0 +1,5 @@
+const shortAddress = (address, chars = 4, endChars = -4)=>{
+    if (!address) return '';
+    return `${address.slice(0, chars)}...${address.slice(endChars)}`;
+};
+export { shortAddress };

package/dist/components/UXSpinner/spinner.d.ts

@@ -8,7 +8,7 @@ export interface UXSpinnerProps extends SquareProps {
     color?: UXForegroundColor | 'currentColor';
     /**
      * 动画持续时间(毫秒)
-     * @default 1000
+     * @default 400
      */
     duration?: number;
 }

package/dist/components/UXSpinner/spinner.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "@heroui/theme";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
+import { colorToClassName } from "@particle-network/ui-shared";
 import { Square } from "../layout/index.js";
 import { SpinnerIcon } from "./SpinnerIcon.js";
-const UXSpinner = ({ size = 18, color = 'primary', duration = 1000, className, style, ...restProps })=>{
+const UXSpinner = ({ size = 18, color = 'primary', duration = 400, className, style, ...restProps })=>{
     const [currentIndex, setCurrentIndex] = useState(0);
     const animationRef = useRef(null);
-    const actualColor = 'currentColor' === color ? 'currentColor' : getHexColorFromCSSVariable(color);
+    const iconClassName = 'currentColor' === color ? void 0 : colorToClassName[color];
     useEffect(()=>{
         const stepDuration = duration / 12;
         const animate = ()=>{
@@ -29,9 +29,7 @@ const UXSpinner = ({ size = 18, color = 'primary', duration = 1000, className, s
         children: /*#__PURE__*/ jsx(SpinnerIcon, {
             width: size,
             height: size,
-            style: {
-                color: actualColor
-            },
+            className: iconClassName,
             currentIndex: currentIndex
         })
     });

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

@@ -1 +1,16 @@
-export * from '@heroui/toast';
+import type { ToastProps } from '@heroui/toast';
+export type UXToastType = 'success' | 'error' | 'loading';
+export type UXToastProps = Partial<ToastProps> & {
+    type: UXToastType;
+};
+export declare const UXToastProvider: () => import("react/jsx-runtime").JSX.Element;
+export declare const toast: {
+    success: (message: string, props?: Partial<ToastProps>) => string | null;
+    error: (message: string, props?: Partial<ToastProps>) => string | null;
+    loading: (message: string, props?: Partial<ToastProps>) => string | null;
+    show: (props?: Partial<ToastProps> & {
+        type: UXToastType;
+    }) => string | null;
+    closeAll: () => void;
+    close: (key: string) => void;
+};

package/dist/components/UXToast/index.js

@@ -1 +1,105 @@
-export * from "@heroui/toast";
+import { jsx } from "react/jsx-runtime";
+import { ToastProvider, addToast, closeAll, closeToast } from "@heroui/toast";
+import CircleCheckIcon from "@particle-network/icons/web/CircleCheckIcon";
+import CircleCloseIcon from "@particle-network/icons/web/CircleCloseIcon";
+import CloseIcon from "@particle-network/icons/web/CloseIcon";
+import { hasLongWord } from "../../utils/index.js";
+import { UXSpinner } from "../UXSpinner/index.js";
+const UXToastProvider = ()=>/*#__PURE__*/ jsx(ToastProvider, {
+        disableAnimation: true,
+        placement: "top-center",
+        maxVisibleToasts: 4,
+        toastOffset: 40,
+        toastProps: {
+            timeout: 4000
+        },
+        regionProps: {
+            className: 'items-center py-10'
+        }
+    });
+const getIcon = (type)=>{
+    if ('success' === type) return /*#__PURE__*/ jsx(CircleCheckIcon, {
+        size: 18
+    });
+    if ('error' === type) return /*#__PURE__*/ jsx(CircleCloseIcon, {
+        size: 18
+    });
+    if ('loading' === type) return /*#__PURE__*/ jsx(UXSpinner, {
+        size: 18
+    });
+    return null;
+};
+const show = (props)=>{
+    const { type, hideCloseButton, variant, classNames, description, ...toastProps } = props ?? {};
+    const { base, description: descriptionClassName, icon, loadingComponent, content, closeButton, ...restClassNames } = classNames ?? {};
+    return addToast({
+        classNames: {
+            base: [
+                'bg-tertiary rounded-xl px-3.5 py-3 shadow-none border-none !w-fit max-w-[90vw] md:max-w-[400px]',
+                !hideCloseButton && 'pr-12',
+                'flat' === variant && 'success' === type && 'bg-[#0E3728]',
+                'flat' === variant && 'error' === type && 'bg-[#501D1D]',
+                base
+            ],
+            description: [
+                'text-foreground text-xs font-medium me-0 leading-4 line-clamp-4',
+                'flat' === variant && 'text-white',
+                hasLongWord(description) && 'break-all',
+                descriptionClassName
+            ],
+            icon: [
+                'shrink-0 h-5 w-5',
+                'success' === type && 'text-success',
+                'error' === type && 'text-danger',
+                'loading' === type && 'text-primary',
+                icon
+            ],
+            loadingComponent: [
+                'text-primary h-5 w-5',
+                loadingComponent
+            ],
+            content: [
+                'gap-x-2.5',
+                content
+            ],
+            closeButton: [
+                'absolute right-3 top-1/2 -translate-y-1/2',
+                hideCloseButton ? 'opacity-0' : 'opacity-100',
+                closeButton
+            ],
+            ...restClassNames
+        },
+        description,
+        icon: getIcon(type),
+        closeIcon: /*#__PURE__*/ jsx(CloseIcon, {
+            className: 'flat' === variant ? 'text-white' : 'text-foreground'
+        }),
+        loadingComponent: /*#__PURE__*/ jsx(UXSpinner, {
+            size: 18
+        }),
+        timeout: 'loading' === type ? 1 / 0 : 3000,
+        ...toastProps
+    });
+};
+const toast = {
+    success: (message, props)=>show({
+            type: 'success',
+            description: message,
+            ...props
+        }),
+    error: (message, props)=>show({
+            type: 'error',
+            description: message,
+            ...props
+        }),
+    loading: (message, props)=>show({
+            type: 'loading',
+            description: message,
+            timeout: 1 / 0,
+            ...props
+        }),
+    show,
+    closeAll: closeAll,
+    close: closeToast
+};
+export { UXToastProvider, toast };

package/dist/components/UXTooltip/index.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
+import { hasLongWord } from "../../utils/index.js";
 import tooltip_extend from "./tooltip.extend.js";
 const renderContent = (content)=>{
     if (!content) return null;
@@ -13,9 +14,17 @@ const renderContent = (content)=>{
         ]);
 };
 const UXTooltip = (props)=>{
-    const { content, ...restProps } = props;
+    const { content, classNames, ...restProps } = props;
+    const { content: contentClassName, ...restClassNames } = classNames ?? {};
     return /*#__PURE__*/ jsx(tooltip_extend, {
         content: renderContent(content),
+        classNames: {
+            content: [
+                hasLongWord(content) && 'break-all',
+                contentClassName
+            ],
+            ...restClassNames
+        },
         ...restProps
     });
 };

package/dist/components/UXTooltip/tooltip.extend.d.ts

@@ -290,25 +290,25 @@ declare const ExtendedTooltip: import("react").ForwardRefExoticComponent<Omit<{
     as?: import("@heroui/system-rsc").As<any> | undefined;
     onClose?: ((() => void) & (() => void)) | undefined;
     classNames?: import("@heroui/theme").SlotsToClasses<"content" | "base" | "arrow"> | undefined;
+    placement?: import("@heroui/aria-utils").OverlayPlacement | undefined;
+    motionProps?: Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> | undefined;
+    delay?: number | undefined;
+    triggerScaleOnOpen?: boolean | undefined;
+    isTriggerDisabled?: boolean | undefined;
+    closeDelay?: number | undefined;
+    trigger?: "focus" | undefined;
+    portalContainer?: Element | undefined;
+    updatePositionDeps?: any[] | undefined;
     isOpen?: boolean | undefined;
+    isDismissable?: boolean | undefined;
+    shouldCloseOnBlur?: boolean | undefined;
+    isKeyboardDismissDisabled?: boolean | undefined;
+    shouldCloseOnInteractOutside?: ((element: Element) => boolean) | undefined;
     defaultOpen?: boolean | undefined;
     onOpenChange?: ((isOpen: boolean) => void) | undefined;
-    placement?: import("@heroui/aria-utils").OverlayPlacement | undefined;
-    containerPadding?: number | undefined;
+    showArrow?: boolean | undefined;
     crossOffset?: number | undefined;
     shouldFlip?: boolean | undefined;
-    isKeyboardDismissDisabled?: boolean | undefined;
-    shouldCloseOnInteractOutside?: ((element: Element) => boolean) | undefined;
-    isDismissable?: boolean | undefined;
-    shouldCloseOnBlur?: boolean | undefined;
-    showArrow?: boolean | undefined;
-    updatePositionDeps?: any[] | undefined;
-    triggerScaleOnOpen?: boolean | undefined;
-    isTriggerDisabled?: boolean | undefined;
-    motionProps?: Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> | undefined;
-    portalContainer?: Element | undefined;
-    trigger?: "focus" | undefined;
-    delay?: number | undefined;
-    closeDelay?: number | undefined;
+    containerPadding?: number | undefined;
 }, "ref"> & import("react").RefAttributes<import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>>>;
 export default ExtendedTooltip;

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/components/typography/Text.js

@@ -4,7 +4,10 @@ import { cn } from "@heroui/theme";
 import { textClasses } from "./Text.type.js";
 const Text = /*#__PURE__*/ forwardRef(({ variant = 'body2Bold', fontWeight, color, lineHeight, align, className, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
         ref: ref,
-        className: cn(textClasses.variant[variant], h1 && textClasses.variant.h1, h2 && textClasses.variant.h2, h3 && textClasses.variant.h3, body1 && textClasses.variant.body1, body1Bold && textClasses.variant.body1Bold, body2 && textClasses.variant.body2, body2Bold && textClasses.variant.body2Bold, body3 && textClasses.variant.body3, body3Bold && textClasses.variant.body3Bold, caption1 && textClasses.variant.caption1, caption1Bold && textClasses.variant.caption1Bold, textClasses.fontWeight[fontWeight], textClasses.color[color], textClasses.lineHeight[lineHeight], textClasses.align[align], className),
+        style: {
+            color: color?.startsWith('#') ? color : void 0
+        },
+        className: cn(textClasses.variant[variant], h1 && textClasses.variant.h1, h2 && textClasses.variant.h2, h3 && textClasses.variant.h3, body1 && textClasses.variant.body1, body1Bold && textClasses.variant.body1Bold, body2 && textClasses.variant.body2, body2Bold && textClasses.variant.body2Bold, body3 && textClasses.variant.body3, body3Bold && textClasses.variant.body3Bold, caption1 && textClasses.variant.caption1, caption1Bold && textClasses.variant.caption1Bold, textClasses.fontWeight[fontWeight], !color?.startsWith('#') && textClasses.color[color], textClasses.lineHeight[lineHeight], textClasses.align[align], className),
         ...props
     }));
 Text.displayName = 'UX.Text';

package/dist/components/typography/Text.type.d.ts

@@ -89,7 +89,7 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
      * | warning    | #FF9821   | #FF9821   |
      * | gold       | #FFB800   | #F38300   |
      */
-    color?: UXForegroundColor;
+    color?: UXForegroundColor | `#${string}`;
     lineHeight?: TextLineHeight;
     align?: TextAlign;
 }

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useI18n';
+export * from './useLang';

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export * from "./useI18n.js";
+export * from "./useLang.js";

package/dist/hooks/useI18n.d.ts

@@ -2,4 +2,10 @@ export declare const useI18n: () => {
     table: {
         emptyContent: string;
     };
+    copy: {
+        copy: string;
+        success: string;
+        error: string;
+        address: string;
+    };
 };

package/dist/hooks/useI18n.js

@@ -2,11 +2,23 @@ import { useLang } from "./useLang.js";
 const en = {
     table: {
         emptyContent: 'No data available.'
+    },
+    copy: {
+        copy: 'Copy',
+        success: 'Copied successfully!',
+        error: 'Copy failed: ',
+        address: 'Address copied: '
     }
 };
 const zh = {
     table: {
         emptyContent: '暂无数据'
+    },
+    copy: {
+        copy: '复制',
+        success: '复制成功！',
+        error: '复制失败：',
+        address: '地址已复制：'
     }
 };
 const useI18n = ()=>{

package/dist/hooks/useLang.js

@@ -1,25 +1,26 @@
 import { useEffect, useState } from "react";
-const STORAGE_KEY = 'ux-preference-language';
+function getLangFromHtml() {
+    if ('undefined' == typeof window) return 'en';
+    const htmlLang = document.documentElement.lang || document.documentElement.getAttribute('lang');
+    if ('zh' === htmlLang || htmlLang?.startsWith('zh')) return 'zh';
+    return 'en';
+}
 function useLang() {
-    const [lang, setLang] = useState(()=>{
-        if ('undefined' != typeof window) {
-            const value = localStorage.getItem(STORAGE_KEY) ?? 'en';
-            return value;
-        }
-        return 'en';
-    });
+    const [lang, setLang] = useState(getLangFromHtml);
     useEffect(()=>{
-        const handleStorageChange = (e)=>{
-            if (e.key === STORAGE_KEY) setLang(e.newValue);
-        };
-        const handleCustomStorageChange = ()=>{
-            setLang(localStorage.getItem(STORAGE_KEY));
-        };
-        window.addEventListener('storage', handleStorageChange);
-        window.addEventListener('ux-lang-change', handleCustomStorageChange);
+        const observer = new MutationObserver((mutations)=>{
+            mutations.forEach((mutation)=>{
+                if ('attributes' === mutation.type && ('lang' === mutation.attributeName || 'data-lang' === mutation.attributeName)) setLang(getLangFromHtml());
+            });
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: [
+                'lang'
+            ]
+        });
         return ()=>{
-            window.removeEventListener('storage', handleStorageChange);
-            window.removeEventListener('ux-lang-change', handleCustomStorageChange);
+            observer.disconnect();
         };
     }, []);
     return lang;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
+export * from './hooks';
 export * from './utils';

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from "./components/index.js";
+export * from "./hooks/index.js";
 export * from "./utils/index.js";

package/dist/utils/detect.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const hasLongWord: (text: React.ReactNode) => boolean;

package/dist/utils/detect.js

@@ -0,0 +1,7 @@
+const hasLongWord = (text)=>{
+    if ('string' != typeof text) return false;
+    const englishWords = text.match(/[a-zA-Z0-9_-]+/g);
+    if (!englishWords) return false;
+    return englishWords.some((word)=>word.length > 30);
+};
+export { hasLongWord };

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses, } from './classes';
+export * from './detect';
 export * from './input-classes';
 export { colorVariants } from './variants';

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 import { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses } from "./classes.js";
 import { colorVariants } from "./variants.js";
+export * from "./detect.js";
 export * from "./input-classes.js";
 export { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, colorVariants, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses };

package/dist/utils/input-classes.js

@@ -41,7 +41,7 @@ const inputClasses = {
         color: {
             default: {
                 inputWrapper: 'caret-foreground',
-                input: 'text-foreground-100'
+                input: 'text-foreground'
             },
             primary: {
                 inputWrapper: 'caret-primary',
@@ -49,7 +49,7 @@ const inputClasses = {
             },
             secondary: {
                 inputWrapper: 'caret-foreground',
-                input: 'text-foreground-300'
+                input: 'text-secondary'
             },
             success: {
                 inputWrapper: 'caret-success',
@@ -185,9 +185,9 @@ const inputClasses = {
                 'lg'
             ],
             class: {
-                inputWrapper: 'bg-background-200 text-foreground-100 font-medium',
+                inputWrapper: 'bg-background-200 text-tertiary font-medium',
                 label: 'font-medium',
-                input: '!outline-none placeholder:text-foreground-100 placeholder:font-medium font-medium text-foreground'
+                input: '!outline-none placeholder:text-tertiary dark:placeholder:text-tertiary placeholder:font-medium font-medium text-foreground'
             }
         },
         {
@@ -195,7 +195,7 @@ const inputClasses = {
             color: 'default',
             isInvalid: false,
             class: {
-                inputWrapper: 'group-data-[focus=true]:border-foreground-100'
+                inputWrapper: 'group-data-[focus=true]:border-foreground'
             }
         },
         {
@@ -211,7 +211,7 @@ const inputClasses = {
             color: 'secondary',
             isInvalid: false,
             class: {
-                inputWrapper: 'group-data-[focus=true]:border-foreground-300'
+                inputWrapper: 'group-data-[focus=true]:border-secondary'
             }
         },
         {
@@ -260,9 +260,9 @@ const inputClasses = {
             isInvalid: false,
             class: {
                 inputWrapper: [
-                    'border-foreground-100',
-                    'data-[hover=true]:border-foreground-100',
-                    'group-data-[focus=true]:border-foreground-100'
+                    'border-foreground',
+                    'data-[hover=true]:border-foreground',
+                    'group-data-[focus=true]:border-foreground'
                 ]
             }
         },
@@ -284,9 +284,9 @@ const inputClasses = {
             isInvalid: false,
             class: {
                 inputWrapper: [
-                    'border-foreground-300',
+                    'border-secondary',
                     'data-[hover=true]:bg-background-200/70',
-                    'group-data-[focus=true]:border-foreground-300'
+                    'group-data-[focus=true]:border-secondary'
                 ]
             }
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.3.0-beta.8",
+  "version": "0.3.0",
   "type": "module",
   "exports": {
     ".": {
@@ -48,7 +48,9 @@
   },
   "dependencies": {
     "ahooks": "^3.9.4",
-    "@particle-network/ui-shared": "0.2.0-beta.2"
+    "copy-to-clipboard": "^3.3.3",
+    "@particle-network/icons": "0.3.0",
+    "@particle-network/ui-shared": "0.2.0"
   },
   "scripts": {
     "build": "rslib build",