@particle-network/ui-react 0.4.0-beta.23 → 0.4.0-beta.25

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

@@ -33,10 +33,10 @@ const button_theme_button = tv({
             text: 'bg-transparent min-w-0 w-auto h-auto px-0'
         },
         size: {
-            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',
+            xs: 'gap-1 rounded-[4px] !text-caption1 min-w-min font-medium [&>svg]:size-3.5',
+            sm: 'gap-1 rounded-[6px] !text-body3 min-w-min font-medium [&>svg]:size-4',
+            md: 'gap-1 rounded-[6px] text-tiny min-w-min font-medium [&>svg]:size-4',
+            lg: 'gap-1 rounded-[10px] text-medium min-w-min font-medium [&>svg]:size-6',
             auto: 'min-w-min rounded-[10px]'
         },
         color: {
@@ -97,7 +97,7 @@ const button_theme_button = tv({
                 'light',
                 'bordered'
             ],
-            class: 'px-sm h-5'
+            class: 'px-md h-5'
         },
         {
             size: 'sm',
@@ -107,7 +107,7 @@ const button_theme_button = tv({
                 'light',
                 'bordered'
             ],
-            class: 'px-sm h-6'
+            class: 'px-lg h-6'
         },
         {
             size: 'md',
@@ -117,7 +117,7 @@ const button_theme_button = tv({
                 'light',
                 'bordered'
             ],
-            class: 'px-md h-[30px]'
+            class: 'px-lg h-[30px]'
         },
         {
             size: 'lg',
@@ -178,64 +178,56 @@ const button_theme_button = tv({
             variant: 'light',
             color: 'default',
             class: [
-                colorVariants.light["default"],
-                'data-[hover=true]:bg-default/40'
+                colorVariants.light["default"]
             ]
         },
         {
             variant: 'light',
             color: 'primary',
             class: [
-                colorVariants.light.primary,
-                'data-[hover=true]:bg-primary/20'
+                colorVariants.light.primary
             ]
         },
         {
             variant: 'light',
             color: 'secondary',
             class: [
-                colorVariants.light.secondary,
-                'data-[hover=true]:bg-default/40'
+                colorVariants.light.secondary
             ]
         },
         {
             variant: 'light',
             color: 'success',
             class: [
-                colorVariants.light.success,
-                'data-[hover=true]:bg-success/20'
+                colorVariants.light.success
             ]
         },
         {
             variant: 'light',
             color: 'warning',
             class: [
-                colorVariants.light.warning,
-                'data-[hover=true]:bg-warning/20'
+                colorVariants.light.warning
             ]
         },
         {
             variant: 'light',
             color: 'danger',
             class: [
-                colorVariants.light.danger,
-                'data-[hover=true]:bg-danger/20'
+                colorVariants.light.danger
             ]
         },
         {
             variant: 'light',
             color: 'bullish',
             class: [
-                colorVariants.light.bullish,
-                'data-[hover=true]:bg-bullish/20'
+                colorVariants.light.bullish
             ]
         },
         {
             variant: 'light',
             color: 'bearish',
             class: [
-                colorVariants.light.bearish,
-                'data-[hover=true]:bg-bearish/20'
+                colorVariants.light.bearish
             ]
         },
         {

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

@@ -101,8 +101,9 @@ function useButton(props) {
     const endContent = getIconClone(endContentProp);
     const spinnerSize = useMemo(()=>{
         const buttonSpinnerSizeMap = {
-            sm: 14,
-            md: 18,
+            xs: 14,
+            sm: 16,
+            md: 16,
             lg: 24
         };
         return buttonSpinnerSizeMap[size];

package/dist/components/UXCheckbox/checkbox.extend.js

@@ -30,7 +30,7 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
                 wrapper: [
                     'w-3.5 h-3.5 me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.2)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-1.5',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-1',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
                 ],
                 label: '!text-body3 font-medium',
@@ -40,7 +40,7 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
                 wrapper: [
                     'w-4 h-4 me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.2)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-2',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-1.5',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
                 ],
                 label: '!text-body2 font-medium',
@@ -50,7 +50,7 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
                 wrapper: [
                     'w-[18px] h-[18px] me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.3)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-secondary before:border-2',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-secondary before:border-1.5',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.3)]'
                 ],
                 label: '!text-body1 font-medium',

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

@@ -4,5 +4,6 @@ import { type VStackProps } from '../layout';
 export interface UXEmptyProps extends VStackProps {
     iconProps?: IconProps;
     text?: React.ReactNode;
+    action?: React.ReactNode;
 }
 export declare const UXEmpty: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", UXEmptyProps, never>;

package/dist/components/UXEmpty/index.js

@@ -8,7 +8,7 @@ import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 const UXEmpty = forwardRef((props, ref)=>{
     const i18n = useI18n();
-    const { text = i18n.table.emptyContent, iconProps, className, ...restProps } = props;
+    const { text = i18n.table.emptyContent, iconProps, className, action, ...restProps } = props;
     return /*#__PURE__*/ jsxs(VStack, {
         ref: ref,
         center: true,
@@ -26,6 +26,10 @@ const UXEmpty = forwardRef((props, ref)=>{
                 color: "secondary",
                 fontWeight: "normal",
                 children: text
+            }),
+            action && /*#__PURE__*/ jsx("div", {
+                className: "mt-lg",
+                children: action
             })
         ]
     });

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

@@ -288,6 +288,7 @@ export declare const UXInput: React.ForwardRefExoticComponent<Omit<Omit<{
     list?: string | undefined;
     step?: string | number | undefined;
     size?: "sm" | "md" | "lg" | undefined;
+    label?: React.ReactNode;
     value?: string | (readonly string[] & string) | undefined;
     width?: string | number | undefined;
     height?: string | number | undefined;
@@ -296,7 +297,7 @@ export declare const UXInput: React.ForwardRefExoticComponent<Omit<Omit<{
     disabled?: boolean | undefined;
     variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
     isClearable?: boolean | undefined;
-    classNames?: import("@heroui/theme").SlotsToClasses<"description" | "errorMessage" | "label" | "base" | "input" | "clearButton" | "mainWrapper" | "inputWrapper" | "innerWrapper" | "helperWrapper"> | undefined;
+    classNames?: import("@heroui/theme").SlotsToClasses<"base" | "input" | "label" | "description" | "errorMessage" | "clearButton" | "mainWrapper" | "inputWrapper" | "innerWrapper" | "helperWrapper"> | undefined;
     isDisabled?: boolean | undefined;
     isReadOnly?: boolean | undefined;
     isRequired?: boolean | undefined;
@@ -308,7 +309,6 @@ export declare const UXInput: React.ForwardRefExoticComponent<Omit<Omit<{
     errorMessage?: React.ReactNode | ((v: import("@react-types/shared").ValidationResult) => React.ReactNode);
     onFocusChange?: ((isFocused: boolean) => void) | undefined;
     placeholder?: string | undefined;
-    label?: React.ReactNode;
     excludeFromTabOrder?: boolean | undefined;
     autoComplete?: string | undefined;
     maxLength?: number | undefined;

package/dist/components/UXInput/input.extend.d.ts

@@ -285,6 +285,7 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<Omit<{
     list?: string | undefined;
     step?: string | number | undefined;
     size?: "sm" | "md" | "lg" | undefined;
+    label?: import("react").ReactNode;
     value?: string | (readonly string[] & string) | undefined;
     width?: string | number | undefined;
     height?: string | number | undefined;
@@ -293,7 +294,7 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<Omit<{
     disabled?: boolean | undefined;
     variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
     isClearable?: boolean | undefined;
-    classNames?: import("@heroui/theme").SlotsToClasses<"description" | "errorMessage" | "label" | "base" | "input" | "clearButton" | "mainWrapper" | "inputWrapper" | "innerWrapper" | "helperWrapper"> | undefined;
+    classNames?: import("@heroui/theme").SlotsToClasses<"base" | "input" | "label" | "description" | "errorMessage" | "clearButton" | "mainWrapper" | "inputWrapper" | "innerWrapper" | "helperWrapper"> | undefined;
     isDisabled?: boolean | undefined;
     isReadOnly?: boolean | undefined;
     isRequired?: boolean | undefined;
@@ -305,7 +306,6 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<Omit<{
     errorMessage?: import("react").ReactNode | ((v: import("@react-types/shared").ValidationResult) => import("react").ReactNode);
     onFocusChange?: ((isFocused: boolean) => void) | undefined;
     placeholder?: string | undefined;
-    label?: import("react").ReactNode;
     excludeFromTabOrder?: boolean | undefined;
     autoComplete?: string | undefined;
     maxLength?: number | undefined;

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

@@ -6,4 +6,4 @@ export type UXModalProps = Omit<ModalProps, 'closeButton'> & {
     tip?: React.ReactNode;
     titleAlign?: 'left' | 'center';
 };
-export declare const UXModal: React.ForwardRefExoticComponent<Omit<UXModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const UXModal: React.FC<UXModalProps>;

package/dist/components/UXModal/index.js

@@ -1,14 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import "react";
 import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@heroui/modal";
 import CloseIcon from "@particle-network/icons/web/CloseIcon";
 import { Center, Circle, Flex } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { UXButton } from "../UXButton/index.js";
-const UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
+const UXModal = (props)=>{
     const { title, footer, backdrop, scrollBehavior = 'inside', children, titleAlign = 'left', classNames, tip, ...restProps } = props;
     return /*#__PURE__*/ jsx(Modal, {
-        ref: ref,
         backdrop: backdrop,
         scrollBehavior: scrollBehavior,
         classNames: {
@@ -88,6 +87,6 @@ const UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
             ]
         })
     });
-});
+};
 UXModal.displayName = 'UX.Modal';
 export { UXModal };

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

@@ -292,7 +292,7 @@ export declare const UXSwitch: React.ForwardRefExoticComponent<Omit<Omit<{
     height?: string | number | undefined;
     multiple?: boolean | undefined;
     disabled?: boolean | undefined;
-    classNames?: import("@heroui/theme").SlotsToClasses<"label" | "base" | "startContent" | "endContent" | "wrapper" | "hiddenInput" | "thumb" | "thumbIcon"> | undefined;
+    classNames?: import("@heroui/theme").SlotsToClasses<"base" | "label" | "startContent" | "endContent" | "wrapper" | "hiddenInput" | "thumb" | "thumbIcon"> | undefined;
     isDisabled?: boolean | undefined;
     isReadOnly?: boolean | undefined;
     onFocusChange?: ((isFocused: boolean) => void) | undefined;

package/dist/components/UXSwitch/switch.extend.d.ts

@@ -289,7 +289,7 @@ declare const ExtendedSwitch: import("react").ForwardRefExoticComponent<Omit<{
     height?: string | number | undefined;
     multiple?: boolean | undefined;
     disabled?: boolean | undefined;
-    classNames?: import("@heroui/theme").SlotsToClasses<"label" | "base" | "startContent" | "endContent" | "wrapper" | "hiddenInput" | "thumb" | "thumbIcon"> | undefined;
+    classNames?: import("@heroui/theme").SlotsToClasses<"base" | "label" | "startContent" | "endContent" | "wrapper" | "hiddenInput" | "thumb" | "thumbIcon"> | undefined;
     isDisabled?: boolean | undefined;
     isReadOnly?: boolean | undefined;
     onFocusChange?: ((isFocused: boolean) => void) | undefined;

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

@@ -286,13 +286,13 @@ export declare const UXTable: import("@heroui/system-rsc").InternalForwardRefRen
     onTransitionStartCapture?: React.TransitionEventHandler<HTMLTableElement> | undefined;
     align?: "start" | "end" | "center" | undefined;
     size?: "md" | "lg" | undefined;
+    summary?: string | undefined;
     width?: string | number | undefined;
     radius?: "sm" | "md" | "lg" | "none" | undefined;
     layout?: "auto" | "fixed" | undefined;
     border?: number | 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;
     key?: React.Key | null | undefined;
     baseRef?: import("@heroui/react-utils").ReactRef<HTMLElement | null> | undefined;

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

@@ -283,13 +283,13 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<Omit<{
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLTableElement> | undefined;
     align?: "start" | "end" | "center" | undefined;
     size?: "md" | "lg" | undefined;
+    summary?: string | undefined;
     width?: string | number | undefined;
     radius?: "sm" | "md" | "lg" | "none" | undefined;
     layout?: "auto" | "fixed" | undefined;
     border?: number | 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;
     key?: import("react").Key | null | undefined;
     baseRef?: import("@heroui/react-utils").ReactRef<HTMLElement | null> | undefined;

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

@@ -7,17 +7,15 @@ import { Text } from "../typography/Text.js";
 const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
     const lang = useLang();
     return /*#__PURE__*/ jsxs(VStack, {
-        center: true,
         gap: 2,
+        items: "center",
         className: cn('cursor-pointer', id),
         onClick: onClick,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: cn('rounded-medium border-2 hover:scale-105 transition-all duration-300', isSelected ? 'border-primary' : 'border-transparent'),
+                className: cn('rounded-medium border-2 hover:scale-105 transition-all duration-300', 'w-[100px] h-[59px] md:w-[120px] md:h-[71px]', isSelected ? 'border-primary' : 'border-transparent'),
                 children: /*#__PURE__*/ jsxs("svg", {
                     xmlns: "http://www.w3.org/2000/svg",
-                    width: "120",
-                    height: "71",
                     viewBox: "0 0 120 71",
                     fill: "none",
                     children: [
@@ -138,6 +136,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                 })
             }),
             /*#__PURE__*/ jsx(Text, {
+                align: "center",
                 children: 'zh' === lang ? zhName : enName
             })
         ]

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

@@ -1,7 +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>;
+import { type UXModalProps } from '../UXModal';
+export type UXThemeSwitchModalProps = Omit<UXModalProps, 'children'>;
+export declare const UXThemeSwitchModal: React.FC<UXThemeSwitchModalProps>;
 export interface UXThemeSwitchProps {
     children?: (onOpen: () => void) => React.ReactNode;
 }

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

@@ -1,113 +1,158 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import "react";
+import { useState } from "react";
+import { cn } from "@heroui/theme";
 import { useDisclosure } from "@heroui/use-disclosure";
-import { ChartColorSwitchIcon } 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 { 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 { UXDrawer } from "../UXDrawer/index.js";
 import { UXInput } from "../UXInput/index.js";
+import { UXModal } from "../UXModal/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 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 } = 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__*/ jsxs(UXDrawer, {
+    const { theme: selectedTheme, setTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
+    const [isFontExampleOpen, setIsFontExampleOpen] = useState(false);
+    return /*#__PURE__*/ jsx(UXModal, {
         isOpen: isOpen,
-        backdrop: "transparent",
         title: i18n.theme.title,
-        footer: /*#__PURE__*/ jsxs(HStack, {
+        footer: /*#__PURE__*/ jsx(UXButton, {
             fullWidth: true,
+            size: "lg",
+            color: "primary",
+            onPress: onClose,
+            children: i18n.theme.done
+        }),
+        onOpenChange: onOpenChange,
+        ...props,
+        children: /*#__PURE__*/ jsxs(VStack, {
             gap: "lg",
             children: [
-                /*#__PURE__*/ jsx(UXButton, {
-                    fullWidth: true,
-                    size: "lg",
-                    onPress: handleReset,
-                    children: i18n.theme.reset
+                /*#__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__*/ jsx(UXDivider, {}),
+                /*#__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: fontUrl,
+                            description: /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    'success' === fontLoadStatus && /*#__PURE__*/ jsxs(Text, {
+                                        body3Bold: true,
+                                        color: "success",
+                                        children: [
+                                            i18n.theme.font.success,
+                                            fontName
+                                        ]
+                                    }),
+                                    'error' === fontLoadStatus && /*#__PURE__*/ jsx(Text, {
+                                        body3Bold: true,
+                                        color: "danger",
+                                        children: i18n.theme.font.error
+                                    })
+                                ]
+                            }),
+                            onValueChange: setFontUrl,
+                            onClear: clearFontUrl
+                        })
+                    ]
+                }),
+                /*#__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, {
-                    fullWidth: true,
-                    isDisabled: 'error' === fontLoadStatus,
-                    size: "lg",
+                    className: "self-start",
+                    variant: "text",
                     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
-                        }),
-                        isInvalid: 'error' === fontLoadStatus,
-                        className: "w-full",
-                        placeholder: i18n.theme.font.placeholder,
-                        value: selectedFontLink,
-                        description: /*#__PURE__*/ jsxs(Fragment, {
+                    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: [
-                                'success' === fontLoadStatus && /*#__PURE__*/ jsxs(Text, {
-                                    body3Bold: true,
-                                    color: "success",
-                                    children: [
-                                        i18n.theme.font.success,
-                                        fontName
-                                    ]
+                                /*#__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
+                                        ]
+                                    })
                                 }),
-                                'error' === fontLoadStatus && /*#__PURE__*/ jsx(Text, {
-                                    body3Bold: true,
-                                    color: "danger",
-                                    children: i18n.theme.font.error
+                                /*#__PURE__*/ jsx(UXCopy, {
+                                    copyText: example.url,
+                                    toastText: example.url,
+                                    children: /*#__PURE__*/ jsx(UXButton, {
+                                        isIconOnly: true,
+                                        size: "sm",
+                                        variant: "light",
+                                        children: /*#__PURE__*/ jsx(CopyIcon, {
+                                            color: "secondary"
+                                        })
+                                    })
                                 })
                             ]
-                        }),
-                        onValueChange: setSelectedFontLink
-                    })
-                ]
-            })
-        ]
+                        }, example.title))
+                })
+            ]
+        })
     });
 };
 const UXThemeSwitch = ({ children })=>{
@@ -124,7 +169,7 @@ const UXThemeSwitch = ({ children })=>{
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             renderChildren(),
-            /*#__PURE__*/ jsx(UXThemeSwitchDrawer, {
+            /*#__PURE__*/ jsx(UXThemeSwitchModal, {
                 isOpen: isOpen,
                 onClose: onClose,
                 onOpenChange: onOpenChange
@@ -132,4 +177,4 @@ const UXThemeSwitch = ({ children })=>{
         ]
     });
 };
-export { UXThemeSwitch, UXThemeSwitchDrawer };
+export { UXThemeSwitch, UXThemeSwitchModal };

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.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 '@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;
     /**
      * 应用的字体名称
      */
@@ -27,10 +19,8 @@ interface State {
     fontLoadStatus: FontLoadStatus;
 }
 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;
     setFontName: (name: string) => void;
 }

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

@@ -2,39 +2,29 @@ import { themeData } from "@particle-network/ui-shared";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 const useThemeStore = create()(persist((set)=>({
-        selectedTheme: themeData["0"],
-        savedTheme: themeData["0"],
-        selectedFontLink: '',
-        savedFontLink: '',
+        theme: themeData["0"],
+        fontUrl: '',
         fontName: '',
         fontLoadStatus: 'idle',
-        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
-            }),
-        setFontName: (name)=>set({
-                fontName: name
+        setFontName: (fontName)=>set({
+                fontName
             })
     }), {
-    name: 'ux-theme-1',
+    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

@@ -3,14 +3,11 @@ 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;
+    theme: ThemeItemType;
+    setTheme: (theme: ThemeItemType) => void;
+    fontUrl: string;
+    setFontUrl: (link: string) => void;
+    clearFontUrl: () => void;
     fontLoadStatus: import("./use-theme-store").FontLoadStatus;
     fontName: string;
 };

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

@@ -49,32 +49,28 @@ const applyFont = (fontName)=>{
     }
 };
 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 theme = useThemeStore((state)=>state.theme);
+    const fontUrl = useThemeStore((state)=>state.fontUrl);
     const fontName = useThemeStore((state)=>state.fontName);
     const fontLoadStatus = useThemeStore((state)=>state.fontLoadStatus);
-    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 storeSetTheme = useThemeStore((state)=>state.setTheme);
+    const storeSetFontUrl = useThemeStore((state)=>state.setFontUrl);
     const storeSetFontLoadStatus = useThemeStore((state)=>state.setFontLoadStatus);
     const storeSetFontName = useThemeStore((state)=>state.setFontName);
-    const applyFontWithStatus = (customFontLink, themeFontName)=>{
+    const applyFontWithStatus = (customFontUrl, themeFontName)=>{
         if ('undefined' == typeof window) return;
-        const isCustomFont = !!customFontLink?.trim();
-        if (!isCustomFont) return void applyFont(themeFontName);
+        const url = customFontUrl?.trim();
+        if (!url) 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.href = url;
         linkElement.onload = ()=>{
             storeSetFontLoadStatus('success');
-            const fontFamily = extractFontFamilyFromLink(customFontLink);
+            const fontFamily = extractFontFamilyFromLink(url);
             if (fontFamily) {
                 applyFont(fontFamily);
                 storeSetFontName(fontFamily);
@@ -92,48 +88,30 @@ const useTheme = ()=>{
     });
     useEffect(()=>{
         preloadFonts();
-    }, []);
-    useEffect(()=>{
-        if (!selectedFontLink.trim()) {
-            storeSetFontLoadStatus('idle');
-            storeSetFontName('');
-        }
-    }, [
-        selectedFontLink
-    ]);
-    useEffect(()=>{
-        applyTheme(savedTheme);
-        debouncedApplyFont(savedFontLink, savedTheme.fontName);
-    }, [
-        savedTheme,
-        savedFontLink
-    ]);
-    const setSelectedTheme = (theme)=>{
-        storeSetSelectedTheme(theme);
         applyTheme(theme);
-        debouncedApplyFont(selectedFontLink, theme.fontName);
-    };
-    const setSavedTheme = (theme)=>{
-        storeSetSavedTheme(theme);
+        debouncedApplyFont(fontUrl, theme.fontName);
+    }, []);
+    const setTheme = (theme)=>{
+        storeSetTheme(theme);
         applyTheme(theme);
+        debouncedApplyFont(fontUrl, theme.fontName);
     };
-    const setSelectedFontLink = (link)=>{
-        storeSetSelectedFontLink(link);
-        debouncedApplyFont(link, selectedTheme.fontName);
+    const setFontUrl = (link)=>{
+        storeSetFontUrl(link);
+        debouncedApplyFont(link, theme.fontName);
     };
-    const setSavedFontLink = (link)=>{
-        storeSetSavedFontLink(link);
-        debouncedApplyFont(link, savedTheme.fontName);
+    const clearFontUrl = ()=>{
+        storeSetFontUrl('');
+        storeSetFontName('');
+        storeSetFontLoadStatus('idle');
+        debouncedApplyFont('', theme.fontName);
     };
     return {
-        selectedTheme,
-        setSelectedTheme,
-        savedTheme,
-        setSavedTheme,
-        selectedFontLink,
-        setSelectedFontLink,
-        savedFontLink,
-        setSavedFontLink,
+        theme,
+        setTheme,
+        fontUrl,
+        setFontUrl,
+        clearFontUrl,
         fontLoadStatus,
         fontName
     };

package/dist/hooks/useI18n.d.ts

@@ -10,14 +10,18 @@ export declare const useI18n: () => {
     };
     theme: {
         title: string;
-        reset: string;
-        apply: string;
+        done: string;
         font: {
             title: string;
             placeholder: string;
             loading: string;
             success: string;
             error: string;
+            hint: string;
+            example: {
+                show: string;
+                hide: string;
+            };
         };
     };
 };

package/dist/hooks/useI18n.js

@@ -11,14 +11,18 @@ const en = {
     },
     theme: {
         title: 'Theme',
-        reset: 'Reset',
-        apply: 'Apply Theme',
+        done: 'Finish',
         font: {
             title: 'Custom Font',
             placeholder: 'Enter Google Fonts URL or custom font URL',
             loading: 'Loading font...',
             success: 'Font loaded: ',
-            error: 'Failed to load font'
+            error: 'Failed to load font',
+            hint: 'Try Google Fonts: ',
+            example: {
+                show: 'Show example',
+                hide: 'Hide example'
+            }
         }
     }
 };
@@ -34,14 +38,18 @@ const zh = {
     },
     theme: {
         title: '主题',
-        reset: '重置',
-        apply: '应用主题',
+        done: '完成',
         font: {
             title: '自定义字体',
             placeholder: '输入 Google Fonts 或自定义字体链接',
             loading: '正在加载字体...',
-            success: '字体加载成功：',
-            error: '字体加载失败'
+            success: '已加载字体：',
+            error: '字体加载失败',
+            hint: '参考 Google Fonts: ',
+            example: {
+                show: '显示示例',
+                hide: '隐藏示例'
+            }
         }
     }
 };

package/dist/utils/detect.js

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

package/dist/utils/variants.js

@@ -1,7 +1,7 @@
 const solid = {
     default: 'bg-background-200 text-foreground',
     primary: 'bg-primary text-primary-foreground',
-    secondary: 'bg-background-200 text-foreground-300',
+    secondary: 'bg-background-200 text-secondary',
     success: 'bg-success text-success-foreground',
     warning: 'bg-warning text-warning-foreground',
     danger: 'bg-danger text-danger-foreground',
@@ -22,9 +22,9 @@ const shadow = {
     bearish: 'shadow-lg shadow-bearish/40 bg-bearish text-foreground'
 };
 const bordered = {
-    default: 'bg-transparent border-foreground-100 text-foreground',
+    default: 'bg-transparent border-foreground text-foreground',
     primary: 'bg-transparent border-primary text-primary',
-    secondary: 'bg-transparent border-foreground-100 text-foreground-300',
+    secondary: 'bg-transparent border-secondary text-secondary',
     success: 'bg-transparent border-success text-success',
     warning: 'bg-transparent border-warning text-warning',
     danger: 'bg-transparent border-danger text-danger',
@@ -33,9 +33,9 @@ const bordered = {
     bearish: 'bg-transparent border-bearish text-bearish'
 };
 const flat = {
-    default: 'bg-background-300 text-default-foreground',
+    default: 'bg-background-300 text-foreground',
     primary: 'bg-primary/20 text-primary',
-    secondary: 'bg-background-300 text-foreground-300',
+    secondary: 'bg-background-300 text-secondary',
     success: 'bg-success/20 text-success',
     warning: 'bg-warning/20 text-warning',
     danger: 'bg-danger/20 text-danger',
@@ -55,15 +55,15 @@ const faded = {
     bearish: 'border-bearish bg-bearish text-foreground'
 };
 const light = {
-    default: 'bg-transparent text-default-foreground',
-    primary: 'bg-transparent text-primary',
-    secondary: 'bg-transparent text-foreground-300',
-    success: 'bg-transparent text-success',
-    warning: 'bg-transparent text-warning',
-    danger: 'bg-transparent text-danger',
-    foreground: 'bg-transparent text-foreground',
-    bullish: 'bg-transparent text-bullish',
-    bearish: 'bg-transparent text-bearish'
+    default: 'bg-transparent text-foreground data-[hover=true]:bg-background-200/50',
+    primary: 'bg-transparent text-primary data-[hover=true]:bg-primary/20',
+    secondary: 'bg-transparent text-secondary data-[hover=true]:bg-background-200/50',
+    success: 'bg-transparent text-success data-[hover=true]:bg-success/20',
+    warning: 'bg-transparent text-warning data-[hover=true]:bg-warning/20',
+    danger: 'bg-transparent text-danger data-[hover=true]:bg-danger/20',
+    foreground: 'bg-transparent text-foreground data-[hover=true]:bg-foreground/20',
+    bullish: 'bg-transparent text-bullish data-[hover=true]:bg-bullish/20',
+    bearish: 'bg-transparent text-bearish data-[hover=true]:bg-bearish/20'
 };
 const ghost = {
     default: 'border-default text-default-foreground',
@@ -77,9 +77,9 @@ const ghost = {
     bearish: 'border-bearish text-foreground hover:!bg-bearish'
 };
 const variants_text = {
-    default: 'bg-transparent text-default-foreground',
+    default: 'bg-transparent text-foreground',
     primary: 'bg-transparent text-primary',
-    secondary: 'bg-transparent text-foreground-300',
+    secondary: 'bg-transparent text-secondary',
     success: 'bg-transparent text-success',
     warning: 'bg-transparent text-warning',
     danger: 'bg-transparent text-danger',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.4.0-beta.23",
+  "version": "0.4.0-beta.25",
   "type": "module",
   "exports": {
     ".": {
@@ -38,8 +38,8 @@
     "@rslib/core": "^0.12.3",
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
-    "@particle-network/lintstaged-config": "0.1.0",
-    "@particle-network/eslint-config": "0.3.0"
+    "@particle-network/eslint-config": "0.3.0",
+    "@particle-network/lintstaged-config": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",