@particle-network/ui-react 0.4.0-beta.0 → 0.4.0-beta.10

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

@@ -1,20 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
+import { cn } from "@heroui/theme";
 import { useLang } from "../../hooks/index.js";
 import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
-const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
+const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
     const lang = useLang();
     return /*#__PURE__*/ jsxs(VStack, {
         center: true,
-        className: "cursor-pointer hover:scale-105 transition-all duration-300",
+        gap: 2,
+        className: cn('cursor-pointer hover:scale-105 transition-all duration-300', id),
         onClick: onClick,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: "rounded-small border-1.5",
-                style: {
-                    borderColor: isSelected ? colorVariables.primary : 'transparent'
-                },
+                className: cn('rounded-medium border-2', isSelected ? 'border-primary' : 'border-transparent'),
                 children: /*#__PURE__*/ jsxs("svg", {
                     xmlns: "http://www.w3.org/2000/svg",
                     width: "180",
@@ -29,7 +28,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "116.19",
                             height: "67",
                             rx: "5",
-                            fill: colorVariables.primary
+                            fill: "currentColor",
+                            className: "text-primary"
                         }),
                         /*#__PURE__*/ jsx("mask", {
                             id: "mask0_40928_218196",
@@ -47,7 +47,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                                 width: "116.19",
                                 height: "67",
                                 rx: "5",
-                                fill: colorVariables.background
+                                fill: "currentColor",
+                                className: "text-background"
                             })
                         }),
                         /*#__PURE__*/ jsx("g", {
@@ -58,7 +59,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                                 width: "116.19",
                                 height: "67",
                                 rx: "6",
-                                fill: colorVariables.background
+                                fill: "currentColor",
+                                className: "text-background"
                             })
                         }),
                         /*#__PURE__*/ jsx("rect", {
@@ -66,7 +68,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             y: "31",
                             width: "100",
                             height: "1",
-                            fill: colorVariables.divider
+                            fill: "currentColor",
+                            className: "text-divider"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "54.082",
@@ -74,7 +77,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "30.0917",
                             height: "6.01835",
                             rx: "3.00917",
-                            fill: colorVariables.foreground
+                            fill: "currentColor",
+                            className: "text-foreground"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "54.082",
@@ -82,7 +86,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "19.5596",
                             height: "6.01835",
                             rx: "3.00917",
-                            fill: colorVariables.bullish
+                            fill: "currentColor",
+                            className: "text-bullish"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "75.8994",
@@ -90,7 +95,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "19.5596",
                             height: "6.01835",
                             rx: "3.00917",
-                            fill: colorVariables.bearish
+                            fill: "currentColor",
+                            className: "text-bearish"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "86.4316",
@@ -98,7 +104,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "6.01835",
                             height: "6.01835",
                             rx: "3.00917",
-                            fill: colorVariables.secondary
+                            fill: "currentColor",
+                            className: "text-secondary"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "94.707",
@@ -106,7 +113,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "6.01835",
                             height: "6.01835",
                             rx: "3.00917",
-                            fill: colorVariables.secondary
+                            fill: "currentColor",
+                            className: "text-secondary"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "102.981",
@@ -114,7 +122,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "6.01835",
                             height: "6.01835",
                             rx: "3.00917",
-                            fill: colorVariables.secondary
+                            fill: "currentColor",
+                            className: "text-secondary"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "27",
@@ -122,7 +131,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "22.5688",
                             height: "22.5688",
                             rx: "11.2844",
-                            fill: colorVariables.primary
+                            fill: "currentColor",
+                            className: "text-primary"
                         })
                     ]
                 })

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

@@ -1,4 +1,7 @@
 import React from 'react';
+import type { DrawerProps } from '@heroui/drawer';
+export type UXThemeSwitchDrawerProps = Omit<DrawerProps, 'children'>;
+export declare const UXThemeSwitchDrawer: React.FC<UXThemeSwitchDrawerProps>;
 export interface UXThemeSwitchProps {
     children?: (onOpen: () => void) => React.ReactNode;
 }

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

@@ -2,22 +2,22 @@ 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 ThemeSwitchIcon from "@particle-network/icons/web/ThemeSwitchIcon";
+import { ChartColorSwitchIcon } from "@particle-network/icons/web";
 import { useI18n } from "../../hooks/index.js";
 import { Flex, 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 { UXInput } from "../UXInput/index.js";
+import { UXSpinner } from "../UXSpinner/index.js";
 import { themeData } from "./theme-data.js";
 import { ThemeItem } from "./theme-item.js";
 import { useTheme } from "./use-theme.js";
-const UXThemeSwitch = ({ children })=>{
+const UXThemeSwitchDrawer = ({ isOpen, onClose, onOpenChange, ...props })=>{
     const i18n = useI18n();
-    const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
-    const { selectedTheme, setSelectedTheme, savedTheme, setSavedTheme, selectedFontLink, setSelectedFontLink, savedFontLink, setSavedFontLink } = useTheme();
+    const { selectedTheme, setSelectedTheme, savedTheme, setSavedTheme, selectedFontLink, setSelectedFontLink, savedFontLink, setSavedFontLink, fontName, fontLoadStatus, fontLoadError } = useTheme();
     const handleOpenChange = (_isOpen)=>{
-        onOpenChange();
+        onOpenChange?.(_isOpen);
         if (!_isOpen) {
             setSelectedTheme(savedTheme);
             setSelectedFontLink(savedFontLink);
@@ -26,96 +26,124 @@ const UXThemeSwitch = ({ children })=>{
     const handleApplyTheme = ()=>{
         setSavedTheme(selectedTheme);
         setSavedFontLink(selectedFontLink);
-        onClose();
+        onClose?.();
     };
     const handleReset = ()=>{
         setSelectedTheme(savedTheme);
         setSelectedFontLink(savedFontLink);
     };
+    return /*#__PURE__*/ jsx(Drawer, {
+        isOpen: isOpen,
+        backdrop: "transparent",
+        onOpenChange: handleOpenChange,
+        ...props,
+        children: /*#__PURE__*/ jsxs(DrawerContent, {
+            children: [
+                /*#__PURE__*/ jsx(DrawerHeader, {
+                    className: "flex flex-col gap-1",
+                    children: i18n.theme.title
+                }),
+                /*#__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__*/ 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
+                                    }),
+                                    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
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__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
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+const UXThemeSwitch = ({ children })=>{
+    const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
     const renderChildren = ()=>{
         if (children) return children(onOpen);
         return /*#__PURE__*/ jsx(UXButton, {
             isIconOnly: true,
             variant: "light",
             onPress: onOpen,
-            children: /*#__PURE__*/ jsx(ThemeSwitchIcon, {})
+            children: /*#__PURE__*/ jsx(ChartColorSwitchIcon, {})
         });
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             renderChildren(),
-            /*#__PURE__*/ jsx(Drawer, {
+            /*#__PURE__*/ jsx(UXThemeSwitchDrawer, {
                 isOpen: isOpen,
-                backdrop: "transparent",
-                onOpenChange: handleOpenChange,
-                children: /*#__PURE__*/ jsxs(DrawerContent, {
-                    children: [
-                        /*#__PURE__*/ jsx(DrawerHeader, {
-                            className: "flex flex-col gap-1",
-                            children: i18n.theme.title
-                        }),
-                        /*#__PURE__*/ jsxs(DrawerBody, {
-                            children: [
-                                /*#__PURE__*/ jsx(Flex, {
-                                    wrap: true,
-                                    justify: "between",
-                                    className: "gap-y-5",
-                                    children: themeData.map((theme)=>/*#__PURE__*/ jsx(ThemeItem, {
-                                            isSelected: selectedTheme.key === theme.key,
-                                            zhName: theme.zhName,
-                                            enName: theme.enName,
-                                            colorVariables: theme.colorVariables,
-                                            onClick: ()=>setSelectedTheme(theme)
-                                        }, theme.key))
-                                }),
-                                /*#__PURE__*/ jsx(UXDivider, {
-                                    className: "my-lg"
-                                }),
-                                /*#__PURE__*/ jsxs(VStack, {
-                                    gap: "md",
-                                    className: "w-full",
-                                    children: [
-                                        /*#__PURE__*/ jsx(Text, {
-                                            className: "text-sm font-medium",
-                                            children: i18n.theme.font.title
-                                        }),
-                                        /*#__PURE__*/ jsx(UXInput, {
-                                            isClearable: true,
-                                            className: "w-full",
-                                            placeholder: i18n.theme.font.placeholder,
-                                            value: selectedFontLink,
-                                            onValueChange: setSelectedFontLink
-                                        })
-                                    ]
-                                })
-                            ]
-                        }),
-                        /*#__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,
-                                        size: "lg",
-                                        color: "primary",
-                                        onPress: handleApplyTheme,
-                                        children: i18n.theme.apply
-                                    })
-                                ]
-                            })
-                        })
-                    ]
-                })
+                onClose: onClose,
+                onOpenChange: onOpenChange
             })
         ]
     });
 };
-export { UXThemeSwitch };
+export { UXThemeSwitch, UXThemeSwitchDrawer };

package/dist/components/UXThemeSwitch/use-color-scheme.d.ts

@@ -0,0 +1,5 @@
+export declare const useColorScheme: () => {
+    colorScheme: import("./theme-data").ColorScheme;
+    isDark: boolean;
+    isLight: boolean;
+};

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

@@ -0,0 +1,11 @@
+import { useThemeStore } from "./use-theme-store.js";
+const useColorScheme = ()=>{
+    const { selectedTheme } = useThemeStore();
+    const { colorScheme } = selectedTheme;
+    return {
+        colorScheme,
+        isDark: 'dark' === colorScheme,
+        isLight: 'light' === colorScheme
+    };
+};
+export { useColorScheme };

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

@@ -0,0 +1 @@
+export declare const useThemeColor: () => Record<import("@particle-network/ui-shared").UXColor, string>;

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

@@ -0,0 +1,6 @@
+import { useThemeStore } from "./use-theme-store.js";
+const useThemeColor = ()=>{
+    const { selectedTheme } = useThemeStore();
+    return selectedTheme.colorVariables;
+};
+export { useThemeColor };

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

@@ -1,4 +1,5 @@
 import { type ThemeItemType } from './theme-data';
+export type FontLoadStatus = 'idle' | 'loading' | 'success' | 'error';
 interface State {
     /**
      * 临时选中的 theme（用于预览）
@@ -16,12 +17,27 @@ interface State {
      * 保存的字体链接
      */
     savedFontLink: string;
+    /**
+     * 应用的字体名称
+     */
+    fontName: string;
+    /**
+     * 字体加载状态
+     */
+    fontLoadStatus: FontLoadStatus;
+    /**
+     * 字体加载错误信息
+     */
+    fontLoadError: string | null;
 }
 interface Actions {
     setSelectedTheme: (theme: ThemeItemType) => void;
     setSavedTheme: (theme: ThemeItemType) => void;
     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;
 export declare const useThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ThemeStore>, "setState" | "persist"> & {

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

@@ -6,6 +6,9 @@ const useThemeStore = create()(persist((set)=>({
         savedTheme: themeData["0"],
         selectedFontLink: '',
         savedFontLink: '',
+        fontName: '',
+        fontLoadStatus: 'idle',
+        fontLoadError: null,
         setSelectedTheme: (theme)=>set({
                 selectedTheme: theme
             }),
@@ -17,9 +20,25 @@ const useThemeStore = create()(persist((set)=>({
             }),
         setSavedFontLink: (link)=>set({
                 savedFontLink: link
+            }),
+        setFontLoadStatus: (status)=>set({
+                fontLoadStatus: status
+            }),
+        setFontLoadError: (error)=>set({
+                fontLoadError: error
+            }),
+        setFontName: (name)=>set({
+                fontName: name
             })
     }), {
     name: 'ux-theme',
-    storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {})
+    storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {}),
+    partialize: (state)=>({
+            selectedTheme: state.selectedTheme,
+            savedTheme: state.savedTheme,
+            fontName: state.fontName,
+            selectedFontLink: state.selectedFontLink,
+            savedFontLink: state.savedFontLink
+        })
 }));
 export { useThemeStore };

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

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

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

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { useDebounceFn } from "ahooks";
 import { themeKeys } from "./theme-data.js";
 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';
@@ -10,7 +11,9 @@ const applyTheme = (theme)=>{
     themeKeys.forEach((key)=>{
         root.classList.remove(key);
     });
-    root.classList.add(theme.key);
+    root.classList.remove('dark');
+    root.classList.remove('light');
+    root.classList.add(theme.id);
 };
 const extractFontFamilyFromLink = (link)=>{
     if (!link) return null;
@@ -24,38 +27,70 @@ const extractFontFamilyFromLink = (link)=>{
         return null;
     }
 };
-const loadGoogleFont = (link)=>{
+const loadGoogleFont = (link, options)=>{
+    const { setFontLoadStatus, setFontLoadError, setFontName } = options;
     if ('undefined' == typeof window) return;
     const existingLink = document.getElementById('ux-google-font-link');
     if (existingLink) existingLink.remove();
     if (!link?.trim()) {
         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 fontFamily = extractFontFamilyFromLink(link);
-    if (fontFamily) {
-        document.documentElement.style.setProperty('--ux-font-family', `"${fontFamily}", ${DEFAULT_FONT_FAMILY}`);
-        document.body.style.fontFamily = `"${fontFamily}", ${DEFAULT_FONT_FAMILY}`;
-    }
 };
 const useTheme = ()=>{
     const selectedTheme = useThemeStore((state)=>state.selectedTheme);
     const savedTheme = useThemeStore((state)=>state.savedTheme);
     const selectedFontLink = useThemeStore((state)=>state.selectedFontLink);
     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
+    });
     useEffect(()=>{
         applyTheme(savedTheme);
-        loadGoogleFont(savedFontLink);
+        debouncedLoadGoogleFont(savedFontLink);
     }, [
         savedTheme,
         savedFontLink
@@ -70,11 +105,11 @@ const useTheme = ()=>{
     };
     const setSelectedFontLink = (link)=>{
         storeSetSelectedFontLink(link);
-        loadGoogleFont(link);
+        debouncedLoadGoogleFont(link);
     };
     const setSavedFontLink = (link)=>{
         storeSetSavedFontLink(link);
-        loadGoogleFont(link);
+        debouncedLoadGoogleFont(link);
     };
     return {
         selectedTheme,
@@ -84,7 +119,10 @@ const useTheme = ()=>{
         selectedFontLink,
         setSelectedFontLink,
         savedFontLink,
-        setSavedFontLink
+        setSavedFontLink,
+        fontLoadStatus,
+        fontLoadError,
+        fontName
     };
 };
 export { useTheme };

package/dist/hooks/useI18n.d.ts

@@ -15,6 +15,9 @@ export declare const useI18n: () => {
         font: {
             title: string;
             placeholder: string;
+            loading: string;
+            success: string;
+            error: string;
         };
     };
 };

package/dist/hooks/useI18n.js

@@ -15,7 +15,10 @@ const en = {
         apply: 'Apply Theme',
         font: {
             title: 'Custom Font',
-            placeholder: 'Enter Google Fonts link'
+            placeholder: 'Enter Google Fonts URL or custom font URL',
+            loading: 'Loading font...',
+            success: 'Font loaded: ',
+            error: 'Failed to load font'
         }
     }
 };
@@ -35,7 +38,10 @@ const zh = {
         apply: '应用主题',
         font: {
             title: '自定义字体',
-            placeholder: '输入 Google Fonts 链接'
+            placeholder: '输入 Google Fonts 或自定义字体链接',
+            loading: '正在加载字体...',
+            success: '字体加载成功：',
+            error: '字体加载失败'
         }
     }
 };