@particle-network/ui-react 0.4.0-beta.3 → 0.4.0-beta.31

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

@@ -1,124 +1,157 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import { Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader } from "@heroui/drawer";
+import { useState } from "react";
+import { cn } from "@heroui/theme";
 import { useDisclosure } from "@heroui/use-disclosure";
-import { ThemeSwitchIcon } from "@particle-network/icons/web";
+import { ChartColorSwitchIcon, CopyIcon } 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 { UXCopy, UXTooltip } from "../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 { UXInput } from "../UXInput/index.js";
+import { UXModal } from "../UXModal/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 UXThemeSwitchDrawer = ({ isOpen, onClose, onOpenChange, ...props })=>{
+const FONT_EXAMPLES = [
+    {
+        title: 'Manrope',
+        url: 'https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap'
+    },
+    {
+        title: 'Poppins',
+        url: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'
+    },
+    {
+        title: 'Roboto',
+        url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'
+    }
+];
+const UXThemeSwitchModal = ({ isOpen, onClose, onOpenChange, ...props })=>{
     const i18n = useI18n();
-    const { selectedTheme, setSelectedTheme, savedTheme, setSavedTheme, selectedFontLink, setSelectedFontLink, savedFontLink, setSavedFontLink, fontName, fontLoadStatus, fontLoadError } = useTheme();
-    const handleOpenChange = (_isOpen)=>{
-        onOpenChange?.(_isOpen);
-        if (!_isOpen) {
-            setSelectedTheme(savedTheme);
-            setSelectedFontLink(savedFontLink);
-        }
-    };
-    const handleApplyTheme = ()=>{
-        setSavedTheme(selectedTheme);
-        setSavedFontLink(selectedFontLink);
-        onClose?.();
-    };
-    const handleReset = ()=>{
-        setSelectedTheme(savedTheme);
-        setSelectedFontLink(savedFontLink);
-    };
-    return /*#__PURE__*/ jsx(Drawer, {
+    const { theme: selectedTheme, setTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
+    const [isFontExampleOpen, setIsFontExampleOpen] = useState(false);
+    return /*#__PURE__*/ jsx(UXModal, {
         isOpen: isOpen,
-        backdrop: "transparent",
-        onOpenChange: handleOpenChange,
+        classNames: {
+            base: 'md:max-h-[800px]'
+        },
+        title: i18n.theme.title,
+        footer: /*#__PURE__*/ jsx(UXButton, {
+            fullWidth: true,
+            size: "lg",
+            color: "primary",
+            onPress: onClose,
+            children: i18n.theme.done
+        }),
+        onOpenChange: onOpenChange,
         ...props,
-        children: /*#__PURE__*/ jsxs(DrawerContent, {
+        children: /*#__PURE__*/ jsxs(VStack, {
+            gap: "lg",
             children: [
-                /*#__PURE__*/ jsx(DrawerHeader, {
-                    className: "flex flex-col gap-1",
-                    children: i18n.theme.title
+                /*#__PURE__*/ jsx("div", {
+                    className: "grid grid-cols-3 gap-y-5 pt-1",
+                    children: themeData.map((theme)=>/*#__PURE__*/ jsx(ThemeItem, {
+                            isSelected: selectedTheme.id === theme.id,
+                            onClick: ()=>setTheme(theme),
+                            ...theme
+                        }, theme.id))
                 }),
-                /*#__PURE__*/ jsxs(DrawerBody, {
+                /*#__PURE__*/ jsx(UXDivider, {}),
+                /*#__PURE__*/ jsxs(VStack, {
+                    gap: "md",
                     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(Text, {
+                            body1Bold: true,
+                            children: i18n.theme.font.title
                         }),
-                        /*#__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, {
+                        /*#__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: fontUrl,
+                            description: /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    'success' === fontLoadStatus && /*#__PURE__*/ jsxs(Text, {
+                                        body3Bold: true,
+                                        color: "success",
                                         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
-                                            })
+                                            i18n.theme.font.success,
+                                            fontName
                                         ]
                                     }),
-                                    onValueChange: setSelectedFontLink
-                                })
-                            ]
+                                    'error' === fontLoadStatus && /*#__PURE__*/ jsx(Text, {
+                                        body3Bold: true,
+                                        color: "danger",
+                                        children: i18n.theme.font.error
+                                    })
+                                ]
+                            }),
+                            onValueChange: setFontUrl,
+                            onClear: clearFontUrl
                         })
                     ]
                 }),
-                /*#__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
-                            })
-                        ]
-                    })
+                /*#__PURE__*/ jsxs(Text, {
+                    color: "secondary",
+                    children: [
+                        i18n.theme.font.hint,
+                        /*#__PURE__*/ jsx("a", {
+                            href: "https://fonts.google.com/",
+                            target: "_blank",
+                            rel: "noopener noreferrer",
+                            className: "hover:underline",
+                            children: "https://fonts.google.com/"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(UXButton, {
+                    className: "self-start",
+                    variant: "text",
+                    color: "primary",
+                    onPress: ()=>{
+                        setIsFontExampleOpen((prev)=>!prev);
+                    },
+                    children: i18n.theme.font.example[isFontExampleOpen ? 'hide' : 'show']
+                }),
+                /*#__PURE__*/ jsx(VStack, {
+                    gap: "sm",
+                    className: cn(isFontExampleOpen ? 'flex' : 'hidden'),
+                    children: FONT_EXAMPLES.map((example)=>/*#__PURE__*/ jsxs(HStack, {
+                            gap: "lg",
+                            children: [
+                                /*#__PURE__*/ jsx(UXTooltip, {
+                                    content: example.url,
+                                    placement: "bottom",
+                                    children: /*#__PURE__*/ jsxs(Text, {
+                                        color: "secondary",
+                                        className: "flex-1 truncate cursor-pointer",
+                                        children: [
+                                            example.title,
+                                            ": ",
+                                            example.url
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(UXCopy, {
+                                    copyText: example.url,
+                                    children: /*#__PURE__*/ jsx(UXButton, {
+                                        isIconOnly: true,
+                                        size: "sm",
+                                        variant: "light",
+                                        children: /*#__PURE__*/ jsx(CopyIcon, {
+                                            color: "secondary"
+                                        })
+                                    })
+                                })
+                            ]
+                        }, example.title))
                 })
             ]
         })
@@ -132,13 +165,13 @@ const UXThemeSwitch = ({ children })=>{
             isIconOnly: true,
             variant: "light",
             onPress: onOpen,
-            children: /*#__PURE__*/ jsx(ThemeSwitchIcon, {})
+            children: /*#__PURE__*/ jsx(ChartColorSwitchIcon, {})
         });
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             renderChildren(),
-            /*#__PURE__*/ jsx(UXThemeSwitchDrawer, {
+            /*#__PURE__*/ jsx(UXThemeSwitchModal, {
                 isOpen: isOpen,
                 onClose: onClose,
                 onOpenChange: onOpenChange
@@ -146,4 +179,4 @@ const UXThemeSwitch = ({ children })=>{
         ]
     });
 };
-export { UXThemeSwitch, UXThemeSwitchDrawer };
+export { UXThemeSwitch, UXThemeSwitchModal };

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

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

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

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

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

@@ -1,19 +1 @@
-export declare const useThemeColor: () => {
-    foreground: string;
-    secondary: string;
-    tertiary: string;
-    primary: string;
-    success: string;
-    danger: string;
-    alert: string;
-    warning: string;
-    gold: string;
-    background: string;
-    'background-200': string;
-    'background-300': string;
-    'background-400': string;
-    overlay: string;
-    divider: string;
-    bullish: string;
-    bearish: string;
-};
+export declare const useThemeColor: () => Record<import("@particle-network/ui-shared").UXColor, string>;

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

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

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

@@ -1,22 +1,14 @@
-import { type ThemeItemType } from './theme-data';
+import { type ThemeItemType } from '@particle-network/ui-shared';
 export type FontLoadStatus = 'idle' | 'loading' | 'success' | 'error';
 interface State {
-    /**
-     * 临时选中的 theme（用于预览）
-     */
-    selectedTheme: ThemeItemType;
     /**
      * 保存的主题
      */
-    savedTheme: ThemeItemType;
-    /**
-     * 临时输入的字体链接（用于预览）
-     */
-    selectedFontLink: string;
+    theme: ThemeItemType;
     /**
      * 保存的字体链接
      */
-    savedFontLink: string;
+    fontUrl: string;
     /**
      * 应用的字体名称
      */
@@ -25,18 +17,11 @@ interface State {
      * 字体加载状态
      */
     fontLoadStatus: FontLoadStatus;
-    /**
-     * 字体加载错误信息
-     */
-    fontLoadError: string | null;
 }
 interface Actions {
-    setSelectedTheme: (theme: ThemeItemType) => void;
-    setSavedTheme: (theme: ThemeItemType) => void;
-    setSelectedFontLink: (link: string) => void;
-    setSavedFontLink: (link: string) => void;
+    setTheme: (theme: ThemeItemType) => void;
+    setFontUrl: (fontUrl: 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

@@ -1,44 +1,30 @@
+import { themeData } from "@particle-network/ui-shared";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
-import { themeData } from "./theme-data.js";
 const useThemeStore = create()(persist((set)=>({
-        selectedTheme: themeData["0"],
-        savedTheme: themeData["0"],
-        selectedFontLink: '',
-        savedFontLink: '',
+        theme: themeData["0"],
+        fontUrl: '',
         fontName: '',
         fontLoadStatus: 'idle',
-        fontLoadError: null,
-        setSelectedTheme: (theme)=>set({
-                selectedTheme: theme
+        setTheme: (theme)=>set({
+                theme
             }),
-        setSavedTheme: (theme)=>set({
-                savedTheme: theme
+        setFontUrl: (fontUrl)=>set({
+                fontUrl
             }),
-        setSelectedFontLink: (link)=>set({
-                selectedFontLink: link
+        setFontLoadStatus: (fontLoadStatus)=>set({
+                fontLoadStatus
             }),
-        setSavedFontLink: (link)=>set({
-                savedFontLink: link
-            }),
-        setFontLoadStatus: (status)=>set({
-                fontLoadStatus: status
-            }),
-        setFontLoadError: (error)=>set({
-                fontLoadError: error
-            }),
-        setFontName: (name)=>set({
-                fontName: name
+        setFontName: (fontName)=>set({
+                fontName
             })
     }), {
-    name: 'ux-theme',
+    name: 'ux-theme-2',
     storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {}),
     partialize: (state)=>({
-            selectedTheme: state.selectedTheme,
-            savedTheme: state.savedTheme,
+            theme: state.theme,
             fontName: state.fontName,
-            selectedFontLink: state.selectedFontLink,
-            savedFontLink: state.savedFontLink
+            fontUrl: state.fontUrl
         })
 }));
 export { useThemeStore };

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

@@ -1,18 +1,13 @@
-import { type ThemeItemType } from './theme-data';
-import { type FontLoadStatus } from './use-theme-store';
+import { type ThemeItemType } from '@particle-network/ui-shared';
 /**
  * UX 主题管理 Hook
  */
 export declare const useTheme: () => {
-    selectedTheme: ThemeItemType;
-    setSelectedTheme: (theme: ThemeItemType) => void;
-    savedTheme: ThemeItemType;
-    setSavedTheme: (theme: ThemeItemType) => void;
-    selectedFontLink: string;
-    setSelectedFontLink: (link: string) => void;
-    savedFontLink: string;
-    setSavedFontLink: (link: string) => void;
-    fontLoadStatus: FontLoadStatus;
-    fontLoadError: string | null;
+    theme: ThemeItemType;
+    setTheme: (theme: ThemeItemType) => void;
+    fontUrl: string;
+    setFontUrl: (link: string) => void;
+    clearFontUrl: () => void;
+    fontLoadStatus: import("./use-theme-store").FontLoadStatus;
     fontName: string;
 };