@particle-network/ui-react 0.4.0-beta.17 → 0.4.0-beta.19

package/dist/components/UXTable/table.extend.d.ts

@@ -1,15 +1,28 @@
 declare const ExtendedTable: import("react").ForwardRefExoticComponent<Omit<{
-    fullWidth?: boolean | undefined;
+    className?: string | undefined;
+    size?: "md" | "lg" | undefined;
+    color?: "default" | "success" | "primary" | "secondary" | "warning" | "danger" | undefined;
+    radius?: "none" | "sm" | "md" | "lg" | undefined;
+    disableAnimation?: boolean | undefined;
+    shadow?: "none" | "sm" | "md" | "lg" | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-details"?: string | undefined;
+    slot?: any;
+    style?: import("react").CSSProperties | undefined;
+    summary?: string | undefined;
+    title?: string | undefined;
     ref?: import("@heroui/react-utils").ReactRef<HTMLElement | null> | undefined;
-    children?: ((string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null) & [import("react").ReactElement<import("@react-types/table").TableHeaderProps<object>, string | import("react").JSXElementConstructor<any>>, import("react").ReactElement<import("@react-types/table").TableBodyProps<object>, string | import("react").JSXElementConstructor<any>>]) | undefined;
     defaultChecked?: any;
     defaultValue?: any;
+    as?: import("@heroui/system-rsc").As<any> | undefined;
+    key?: import("react").Key | null | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | undefined;
     autoFocus?: boolean | undefined;
-    className?: string | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
@@ -19,11 +32,8 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<Omit<{
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
-    slot?: any;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: import("react").CSSProperties | undefined;
     tabIndex?: number | undefined;
-    title?: string | undefined;
     translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
@@ -40,7 +50,6 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<Omit<{
     vocab?: string | undefined;
     autoCorrect?: string | undefined;
     autoSave?: string | undefined;
-    color?: "default" | "success" | "secondary" | "primary" | "danger" | "warning" | undefined;
     itemProp?: string | undefined;
     itemScope?: boolean | undefined;
     itemType?: string | undefined;
@@ -53,7 +62,7 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<Omit<{
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;
-    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -69,28 +78,24 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<Omit<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
-    "aria-describedby"?: string | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     "aria-description"?: string | undefined;
-    "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
     "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
-    "aria-label"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
     "aria-level"?: number | undefined;
     "aria-live"?: "off" | "assertive" | "polite" | undefined;
     "aria-modal"?: (boolean | "true" | "false") | undefined;
     "aria-multiline"?: (boolean | "true" | "false") | undefined;
     "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "vertical" | "horizontal" | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
     "aria-owns"?: string | undefined;
     "aria-placeholder"?: string | undefined;
     "aria-posinset"?: number | undefined;
@@ -110,6 +115,7 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<Omit<{
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;
     "aria-valuetext"?: string | undefined;
+    children?: ((string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null) & [import("react").ReactElement<import("@react-types/table").TableHeaderProps<object>, string | import("react").JSXElementConstructor<any>>, import("react").ReactElement<import("@react-types/table").TableBodyProps<object>, string | import("react").JSXElementConstructor<any>>]) | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
@@ -281,28 +287,22 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<Omit<{
     onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLTableElement> | undefined;
     onTransitionStart?: import("react").TransitionEventHandler<HTMLTableElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLTableElement> | undefined;
-    align?: "start" | "end" | "center" | undefined;
-    size?: "md" | "lg" | undefined;
-    width?: string | number | undefined;
-    radius?: "sm" | "md" | "lg" | "none" | undefined;
+    classNames?: import("@heroui/theme").SlotsToClasses<"base" | "table" | "tbody" | "td" | "tfoot" | "th" | "thead" | "tr" | "wrapper" | "sortIcon" | "emptyWrapper" | "loadingWrapper"> | undefined;
+    align?: "center" | "start" | "end" | undefined;
+    fullWidth?: boolean | undefined;
     layout?: "auto" | "fixed" | undefined;
-    border?: number | undefined;
-    key?: import("react").Key | null | undefined;
-    classNames?: import("@heroui/theme").SlotsToClasses<"table" | "base" | "tbody" | "td" | "tfoot" | "th" | "thead" | "tr" | "wrapper" | "sortIcon" | "emptyWrapper" | "loadingWrapper"> | undefined;
-    disableAnimation?: boolean | undefined;
-    summary?: string | undefined;
-    as?: import("@heroui/system-rsc").As<any> | undefined;
+    width?: string | number | undefined;
     baseRef?: import("@heroui/react-utils").ReactRef<HTMLElement | null> | undefined;
+    scrollRef?: import("@react-types/shared").RefObject<HTMLElement | null> | undefined;
+    border?: number | undefined;
     disallowEmptySelection?: boolean | undefined;
     onSelectionChange?: ((keys: import("@react-types/shared").Selection) => void) | undefined;
     disabledKeys?: Iterable<import("@react-types/shared").Key> | undefined;
-    scrollRef?: import("@react-types/shared").RefObject<HTMLElement | null> | undefined;
     isVirtualized?: boolean | undefined;
-    shadow?: "sm" | "md" | "lg" | "none" | undefined;
     topContent?: import("react").ReactNode;
     bottomContent?: import("react").ReactNode;
     keyboardDelegate?: import("@react-types/shared").KeyboardDelegate | undefined;
-    selectionBehavior?: "replace" | "toggle" | undefined;
+    selectionBehavior?: "toggle" | "replace" | undefined;
     shouldSelectOnPressUp?: boolean | undefined;
     escapeKeyBehavior?: "none" | "clearSelection" | undefined;
     selectionMode?: import("@react-types/shared").SelectionMode | undefined;
@@ -321,7 +321,7 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<Omit<{
     isMultiSelectable?: boolean | undefined;
     layoutDelegate?: import("@react-types/shared").LayoutDelegate | undefined;
     disallowTypeAhead?: boolean | undefined;
-    focusMode?: "row" | "cell" | undefined;
+    focusMode?: "cell" | "row" | undefined;
     getRowText?: ((key: import("@react-types/shared").Key) => string) | undefined;
     onRowAction?: (((key: import("react").Key) => void) & ((key: import("@react-types/shared").Key) => void)) | undefined;
     onCellAction?: (((key: import("react").Key) => void) & ((key: import("@react-types/shared").Key) => void)) | undefined;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import ExtendedTabs from './tabs.extend';
 export type UXTabsProps = React.ComponentPropsWithRef<typeof ExtendedTabs>;
-export declare const UXTabs: React.ForwardRefExoticComponent<Omit<Omit<import("@heroui/tabs").TabsProps, "color" | "variant"> & {
+export declare const UXTabs: React.ForwardRefExoticComponent<Omit<Omit<import("@heroui/tabs").TabsProps, "variant" | "color"> & {
     variant?: "solid" | "light" | "text" | "switch";
     color?: "default" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish";
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -9,15 +9,15 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
     return /*#__PURE__*/ jsxs(VStack, {
         center: true,
         gap: 2,
-        className: cn('cursor-pointer hover:scale-105 transition-all duration-300', id),
+        className: cn('cursor-pointer', id),
         onClick: onClick,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: cn('rounded-medium border-2', isSelected ? 'border-primary' : 'border-transparent'),
+                className: cn('rounded-medium border-2 hover:scale-105 transition-all duration-300', isSelected ? 'border-primary' : 'border-transparent'),
                 children: /*#__PURE__*/ jsxs("svg", {
                     xmlns: "http://www.w3.org/2000/svg",
-                    width: "180",
-                    height: "106.5",
+                    width: "120",
+                    height: "71",
                     viewBox: "0 0 120 71",
                     fill: "none",
                     children: [

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

@@ -1,21 +1,21 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader } from "@heroui/drawer";
 import { useDisclosure } from "@heroui/use-disclosure";
 import { ChartColorSwitchIcon } from "@particle-network/icons/web";
 import { themeData } from "@particle-network/ui-shared";
 import { useI18n } from "../../hooks/index.js";
-import { Flex, HStack, VStack } from "../layout/index.js";
+import { HStack, VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { UXButton } from "../UXButton/index.js";
 import { UXDivider } from "../UXDivider/index.js";
+import { UXDrawer } from "../UXDrawer/index.js";
 import { UXInput } from "../UXInput/index.js";
 import { UXSpinner } from "../UXSpinner/index.js";
 import { ThemeItem } from "./theme-item.js";
 import { useTheme } from "./use-theme.js";
 const UXThemeSwitchDrawer = ({ isOpen, onClose, onOpenChange, ...props })=>{
     const i18n = useI18n();
-    const { selectedTheme, setSelectedTheme, savedTheme, setSavedTheme, selectedFontLink, setSelectedFontLink, savedFontLink, setSavedFontLink, fontName, fontLoadStatus, fontLoadError } = useTheme();
+    const { selectedTheme, setSelectedTheme, savedTheme, setSavedTheme, selectedFontLink, setSelectedFontLink, savedFontLink, setSavedFontLink, fontName, fontLoadStatus } = useTheme();
     const handleOpenChange = (_isOpen)=>{
         onOpenChange?.(_isOpen);
         if (!_isOpen) {
@@ -32,96 +32,82 @@ const UXThemeSwitchDrawer = ({ isOpen, onClose, onOpenChange, ...props })=>{
         setSelectedTheme(savedTheme);
         setSelectedFontLink(savedFontLink);
     };
-    return /*#__PURE__*/ jsx(Drawer, {
+    return /*#__PURE__*/ jsxs(UXDrawer, {
         isOpen: isOpen,
         backdrop: "transparent",
-        onOpenChange: handleOpenChange,
-        ...props,
-        children: /*#__PURE__*/ jsxs(DrawerContent, {
+        title: i18n.theme.title,
+        footer: /*#__PURE__*/ jsxs(HStack, {
+            fullWidth: true,
+            gap: "lg",
             children: [
-                /*#__PURE__*/ jsx(DrawerHeader, {
-                    className: "flex flex-col gap-1",
-                    children: i18n.theme.title
+                /*#__PURE__*/ jsx(UXButton, {
+                    fullWidth: true,
+                    size: "lg",
+                    onPress: handleReset,
+                    children: i18n.theme.reset
                 }),
-                /*#__PURE__*/ jsxs(DrawerBody, {
-                    children: [
-                        /*#__PURE__*/ jsx(Flex, {
-                            wrap: true,
-                            justify: "between",
-                            className: "gap-y-5",
-                            children: themeData.map((theme)=>/*#__PURE__*/ jsx(ThemeItem, {
-                                    isSelected: selectedTheme.id === theme.id,
-                                    onClick: ()=>setSelectedTheme(theme),
-                                    ...theme
-                                }, theme.id))
-                        }),
-                        /*#__PURE__*/ jsx(UXDivider, {
-                            className: "my-lg"
+                /*#__PURE__*/ jsx(UXButton, {
+                    fullWidth: true,
+                    isDisabled: 'error' === fontLoadStatus,
+                    size: "lg",
+                    color: "primary",
+                    onPress: handleApplyTheme,
+                    children: i18n.theme.apply
+                })
+            ]
+        }),
+        onOpenChange: handleOpenChange,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "grid grid-cols-3 gap-y-5",
+                children: themeData.map((theme)=>/*#__PURE__*/ jsx(ThemeItem, {
+                        isSelected: selectedTheme.id === theme.id,
+                        onClick: ()=>setSelectedTheme(theme),
+                        ...theme
+                    }, theme.id))
+            }),
+            /*#__PURE__*/ jsx(UXDivider, {
+                className: "my-lg"
+            }),
+            /*#__PURE__*/ jsxs(VStack, {
+                gap: "md",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        body1Bold: true,
+                        children: i18n.theme.font.title
+                    }),
+                    /*#__PURE__*/ jsx(UXInput, {
+                        isClearable: true,
+                        startContent: 'loading' === fontLoadStatus && /*#__PURE__*/ jsx(UXSpinner, {
+                            size: 18
                         }),
-                        /*#__PURE__*/ jsxs(VStack, {
-                            gap: "md",
+                        isInvalid: 'error' === fontLoadStatus,
+                        className: "w-full",
+                        placeholder: i18n.theme.font.placeholder,
+                        value: selectedFontLink,
+                        description: /*#__PURE__*/ jsxs(Fragment, {
                             children: [
-                                /*#__PURE__*/ jsx(Text, {
-                                    body1Bold: true,
-                                    children: i18n.theme.font.title
+                                'success' === fontLoadStatus && /*#__PURE__*/ jsxs(Text, {
+                                    body3Bold: true,
+                                    color: "success",
+                                    children: [
+                                        i18n.theme.font.success,
+                                        fontName
+                                    ]
                                 }),
-                                /*#__PURE__*/ jsx(UXInput, {
-                                    isClearable: true,
-                                    startContent: 'loading' === fontLoadStatus && /*#__PURE__*/ jsx(UXSpinner, {
-                                        size: 18
-                                    }),
-                                    isInvalid: 'error' === fontLoadStatus,
-                                    className: "w-full",
-                                    placeholder: i18n.theme.font.placeholder,
-                                    value: selectedFontLink,
-                                    description: /*#__PURE__*/ jsxs(Fragment, {
-                                        children: [
-                                            'success' === fontLoadStatus && /*#__PURE__*/ jsxs(Text, {
-                                                body3Bold: true,
-                                                color: "success",
-                                                children: [
-                                                    i18n.theme.font.success,
-                                                    fontName
-                                                ]
-                                            }),
-                                            'error' === fontLoadStatus && fontLoadError && /*#__PURE__*/ jsx(Text, {
-                                                body3Bold: true,
-                                                color: "danger",
-                                                children: fontLoadError
-                                            })
-                                        ]
-                                    }),
-                                    onValueChange: setSelectedFontLink
+                                'error' === fontLoadStatus && /*#__PURE__*/ jsx(Text, {
+                                    body3Bold: true,
+                                    color: "danger",
+                                    children: i18n.theme.font.error
                                 })
                             ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(DrawerFooter, {
-                    className: "mb-8",
-                    children: /*#__PURE__*/ jsxs(HStack, {
-                        fullWidth: true,
-                        gap: "lg",
-                        children: [
-                            /*#__PURE__*/ jsx(UXButton, {
-                                fullWidth: true,
-                                size: "lg",
-                                onPress: handleReset,
-                                children: i18n.theme.reset
-                            }),
-                            /*#__PURE__*/ jsx(UXButton, {
-                                fullWidth: true,
-                                isDisabled: 'error' === fontLoadStatus,
-                                size: "lg",
-                                color: "primary",
-                                onPress: handleApplyTheme,
-                                children: i18n.theme.apply
-                            })
-                        ]
+                        }),
+                        onValueChange: setSelectedFontLink
                     })
-                })
-            ]
-        })
+                ]
+            })
+        ]
     });
 };
 const UXThemeSwitch = ({ children })=>{

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

@@ -25,10 +25,6 @@ interface State {
      * 字体加载状态
      */
     fontLoadStatus: FontLoadStatus;
-    /**
-     * 字体加载错误信息
-     */
-    fontLoadError: string | null;
 }
 interface Actions {
     setSelectedTheme: (theme: ThemeItemType) => void;
@@ -36,7 +32,6 @@ interface Actions {
     setSelectedFontLink: (link: string) => void;
     setSavedFontLink: (link: string) => void;
     setFontLoadStatus: (status: FontLoadStatus) => void;
-    setFontLoadError: (error: string | null) => void;
     setFontName: (name: string) => void;
 }
 type ThemeStore = State & Actions;

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

@@ -8,7 +8,6 @@ const useThemeStore = create()(persist((set)=>({
         savedFontLink: '',
         fontName: '',
         fontLoadStatus: 'idle',
-        fontLoadError: null,
         setSelectedTheme: (theme)=>set({
                 selectedTheme: theme
             }),
@@ -24,14 +23,11 @@ const useThemeStore = create()(persist((set)=>({
         setFontLoadStatus: (status)=>set({
                 fontLoadStatus: status
             }),
-        setFontLoadError: (error)=>set({
-                fontLoadError: error
-            }),
         setFontName: (name)=>set({
                 fontName: name
             })
     }), {
-    name: 'ux-theme',
+    name: 'ux-theme-1',
     storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {}),
     partialize: (state)=>({
             selectedTheme: state.selectedTheme,

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

@@ -1,5 +1,4 @@
 import { type ThemeItemType } from '@particle-network/ui-shared';
-import { type FontLoadStatus } from './use-theme-store';
 /**
  * UX 主题管理 Hook
  */
@@ -12,7 +11,6 @@ export declare const useTheme: () => {
     setSelectedFontLink: (link: string) => void;
     savedFontLink: string;
     setSavedFontLink: (link: string) => void;
-    fontLoadStatus: FontLoadStatus;
-    fontLoadError: string | null;
+    fontLoadStatus: import("./use-theme-store").FontLoadStatus;
     fontName: string;
 };

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

@@ -2,7 +2,18 @@ import { useEffect } from "react";
 import { themeKeys } from "@particle-network/ui-shared";
 import { useDebounceFn } from "ahooks";
 import { useThemeStore } from "./use-theme-store.js";
-const DEFAULT_FONT_FAMILY = 'ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji';
+const DEFAULT_FONT_FAMILY = 'Inter,system-ui,sans-serif,"Microsoft YaHei"';
+const PRELOAD_FONTS_URL = 'https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap';
+const preloadFonts = ()=>{
+    if ('undefined' == typeof window) return;
+    const existingLink = document.getElementById('ux-preload-fonts-link');
+    if (existingLink) return;
+    const linkElement = document.createElement('link');
+    linkElement.id = 'ux-preload-fonts-link';
+    linkElement.rel = 'stylesheet';
+    linkElement.href = PRELOAD_FONTS_URL;
+    document.head.appendChild(linkElement);
+};
 const applyTheme = (theme)=>{
     if ('undefined' == typeof window) return;
     const root = document.documentElement;
@@ -21,50 +32,21 @@ const extractFontFamilyFromLink = (link)=>{
         const url = new URL(link);
         const familyParam = url.searchParams.get('family');
         if (!familyParam) return null;
-        const fontName = familyParam.split(':')[0].replace(/\+/g, ' ');
-        return fontName;
+        const firstFamily = familyParam.split('&family=')[0].split(':')[0].replace(/\+/g, ' ');
+        return firstFamily;
     } catch  {
         return null;
     }
 };
-const loadGoogleFont = (link, options)=>{
-    const { setFontLoadStatus, setFontLoadError, setFontName } = options;
+const applyFont = (fontName)=>{
     if ('undefined' == typeof window) return;
-    const existingLink = document.getElementById('ux-google-font-link');
-    if (existingLink) existingLink.remove();
-    if (!link?.trim()) {
+    if (fontName) {
+        document.documentElement.style.setProperty('--ux-font-family', `"${fontName}", ${DEFAULT_FONT_FAMILY}`);
+        document.body.style.fontFamily = `"${fontName}", ${DEFAULT_FONT_FAMILY}`;
+    } else {
         document.documentElement.style.setProperty('--ux-font-family', DEFAULT_FONT_FAMILY);
         document.body.style.fontFamily = DEFAULT_FONT_FAMILY;
-        setFontLoadStatus('idle');
-        setFontLoadError(null);
-        setFontName('');
-        return;
     }
-    setFontLoadStatus('loading');
-    setFontLoadError(null);
-    const linkElement = document.createElement('link');
-    linkElement.id = 'ux-google-font-link';
-    linkElement.rel = 'stylesheet';
-    linkElement.href = link;
-    linkElement.onload = ()=>{
-        setFontLoadStatus('success');
-        setFontLoadError(null);
-        const fontFamily = extractFontFamilyFromLink(link);
-        if (fontFamily) {
-            document.documentElement.style.setProperty('--ux-font-family', `"${fontFamily}", ${DEFAULT_FONT_FAMILY}`);
-            document.body.style.fontFamily = `"${fontFamily}", ${DEFAULT_FONT_FAMILY}`;
-            setFontName(fontFamily);
-        }
-    };
-    linkElement.onerror = ()=>{
-        const errorMessage = '字体加载失败，请检查链接是否正确';
-        setFontLoadStatus('error');
-        setFontLoadError(errorMessage);
-        setFontName('');
-        document.documentElement.style.setProperty('--ux-font-family', DEFAULT_FONT_FAMILY);
-        document.body.style.fontFamily = DEFAULT_FONT_FAMILY;
-    };
-    document.head.appendChild(linkElement);
 };
 const useTheme = ()=>{
     const selectedTheme = useThemeStore((state)=>state.selectedTheme);
@@ -73,24 +55,55 @@ const useTheme = ()=>{
     const savedFontLink = useThemeStore((state)=>state.savedFontLink);
     const fontName = useThemeStore((state)=>state.fontName);
     const fontLoadStatus = useThemeStore((state)=>state.fontLoadStatus);
-    const fontLoadError = useThemeStore((state)=>state.fontLoadError);
     const storeSetSelectedTheme = useThemeStore((state)=>state.setSelectedTheme);
     const storeSetSavedTheme = useThemeStore((state)=>state.setSavedTheme);
     const storeSetSelectedFontLink = useThemeStore((state)=>state.setSelectedFontLink);
     const storeSetSavedFontLink = useThemeStore((state)=>state.setSavedFontLink);
     const storeSetFontLoadStatus = useThemeStore((state)=>state.setFontLoadStatus);
-    const storeSetFontLoadError = useThemeStore((state)=>state.setFontLoadError);
     const storeSetFontName = useThemeStore((state)=>state.setFontName);
-    const { run: debouncedLoadGoogleFont } = useDebounceFn((link)=>loadGoogleFont(link, {
-            setFontLoadStatus: storeSetFontLoadStatus,
-            setFontLoadError: storeSetFontLoadError,
-            setFontName: storeSetFontName
-        }), {
-        wait: 500
+    const applyFontWithStatus = (customFontLink, themeFontName)=>{
+        if ('undefined' == typeof window) return;
+        const isCustomFont = !!customFontLink?.trim();
+        if (!isCustomFont) return void applyFont(themeFontName);
+        const existingLink = document.getElementById('ux-google-font-link');
+        if (existingLink) existingLink.remove();
+        storeSetFontLoadStatus('loading');
+        const linkElement = document.createElement('link');
+        linkElement.id = 'ux-google-font-link';
+        linkElement.rel = 'stylesheet';
+        linkElement.href = customFontLink;
+        linkElement.onload = ()=>{
+            storeSetFontLoadStatus('success');
+            const fontFamily = extractFontFamilyFromLink(customFontLink);
+            if (fontFamily) {
+                applyFont(fontFamily);
+                storeSetFontName(fontFamily);
+            }
+        };
+        linkElement.onerror = ()=>{
+            storeSetFontLoadStatus('error');
+            storeSetFontName('');
+            applyFont(themeFontName);
+        };
+        document.head.appendChild(linkElement);
+    };
+    const { run: debouncedApplyFont } = useDebounceFn((customFontLink, themeFontName)=>applyFontWithStatus(customFontLink, themeFontName), {
+        wait: 300
     });
+    useEffect(()=>{
+        preloadFonts();
+    }, []);
+    useEffect(()=>{
+        if (!selectedFontLink.trim()) {
+            storeSetFontLoadStatus('idle');
+            storeSetFontName('');
+        }
+    }, [
+        selectedFontLink
+    ]);
     useEffect(()=>{
         applyTheme(savedTheme);
-        debouncedLoadGoogleFont(savedFontLink);
+        debouncedApplyFont(savedFontLink, savedTheme.fontName);
     }, [
         savedTheme,
         savedFontLink
@@ -98,6 +111,7 @@ const useTheme = ()=>{
     const setSelectedTheme = (theme)=>{
         storeSetSelectedTheme(theme);
         applyTheme(theme);
+        debouncedApplyFont(selectedFontLink, theme.fontName);
     };
     const setSavedTheme = (theme)=>{
         storeSetSavedTheme(theme);
@@ -105,11 +119,11 @@ const useTheme = ()=>{
     };
     const setSelectedFontLink = (link)=>{
         storeSetSelectedFontLink(link);
-        debouncedLoadGoogleFont(link);
+        debouncedApplyFont(link, selectedTheme.fontName);
     };
     const setSavedFontLink = (link)=>{
         storeSetSavedFontLink(link);
-        debouncedLoadGoogleFont(link);
+        debouncedApplyFont(link, savedTheme.fontName);
     };
     return {
         selectedTheme,
@@ -121,7 +135,6 @@ const useTheme = ()=>{
         savedFontLink,
         setSavedFontLink,
         fontLoadStatus,
-        fontLoadError,
         fontName
     };
 };

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

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ToastProps } from '@heroui/toast';
+export { addToast, closeAll, closeToast, getToastQueue, isToastClosing } from '@heroui/toast';
 export type UXToastType = 'success' | 'error' | 'loading' | 'info';
 export type UXToastProps = Partial<ToastProps> & {
     type: UXToastType;

package/dist/components/UXToast/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { ToastProvider, addToast, closeAll, closeToast } from "@heroui/toast";
+import { ToastProvider, addToast, closeAll, closeToast, getToastQueue, isToastClosing } 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";
@@ -106,4 +106,4 @@ const toast = {
     closeAll: closeAll,
     close: closeToast
 };
-export { UXToastProvider, toast };
+export { UXToastProvider, addToast, closeAll, closeToast, getToastQueue, isToastClosing, toast };