@particle-network/ui-react 0.5.1-beta.8 → 0.6.0

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

@@ -4,9 +4,16 @@ import { type UXModalProps } from '../UXModal';
 export interface UXThemeSwitchModalProps extends Pick<UXModalProps, 'isOpen' | 'onClose' | 'onOpenChange' | 'backdrop'> {
     as?: 'modal' | 'drawer';
     omitThemes?: ThemeId[];
+    /**
+     * 颜色改变模式
+     * - drag: 拖动时改变颜色
+     * - dragEnd: 拖动停止时改变颜色
+     * @default dragEnd
+     */
+    colorChangeMode?: 'drag' | 'dragEnd';
 }
 export declare const UXThemeSwitchModal: React.FC<UXThemeSwitchModalProps>;
-export interface UXThemeSwitchProps extends Pick<UXThemeSwitchModalProps, 'as' | 'omitThemes' | 'backdrop'> {
+export interface UXThemeSwitchProps extends Pick<UXThemeSwitchModalProps, 'as' | 'omitThemes' | 'backdrop' | 'colorChangeMode'> {
     children?: (onOpen: () => void) => React.ReactNode;
 }
 export declare const UXThemeSwitch: React.FC<UXThemeSwitchProps>;

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

@@ -1,10 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { cn } from "@heroui/theme";
+import { useEffect, useMemo, useState } from "react";
 import { useDisclosure } from "@heroui/use-disclosure";
 import { ChartColorSwitchIcon, CopyIcon } from "@particle-network/icons/web";
-import { DEFAULT_THEME_ID, themeData } from "@particle-network/ui-shared";
+import { themeData } from "@particle-network/ui-shared";
 import { useI18n } from "../../hooks/index.js";
+import { cn } from "../../utils/index.js";
 import { HStack, VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { UXButton } from "../UXButton/index.js";
@@ -32,27 +32,19 @@ const FONT_EXAMPLES = [
         url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'
     }
 ];
-const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, onClose, onOpenChange })=>{
+const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, onClose, onOpenChange, colorChangeMode })=>{
     const i18n = useI18n();
-    const { theme: selectedTheme, customTheme: savedCustomTheme, setTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
+    const { theme: selectedTheme, customTheme: savedCustomTheme, setTheme, initTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
     const [isFontExampleOpen, setIsFontExampleOpen] = useState(false);
+    useEffect(()=>{
+        initTheme();
+    }, []);
     const Component = 'modal' === as ? UXModal : UXDrawer;
     const themes = useMemo(()=>themeData.filter((theme)=>!omitThemes.includes(theme.id)), [
         omitThemes
     ]);
     const handleThemeSelect = (theme)=>{
-        if ('custom' === theme.id) if (savedCustomTheme) setTheme(savedCustomTheme);
-        else {
-            const baseTheme = themeData.find((t)=>t.id === DEFAULT_THEME_ID) || themeData["0"];
-            const customTheme = {
-                ...theme,
-                baseThemeId: DEFAULT_THEME_ID,
-                colorScheme: baseTheme.colorScheme,
-                colorVariables: baseTheme.colorVariables
-            };
-            setTheme(customTheme);
-        }
-        else setTheme(theme);
+        'custom' === theme.id ? setTheme(savedCustomTheme) : setTheme(theme);
     };
     return /*#__PURE__*/ jsx(Component, {
         isOpen: isOpen,
@@ -83,7 +75,9 @@ const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, o
                 'custom' === selectedTheme.id && /*#__PURE__*/ jsxs(Fragment, {
                     children: [
                         /*#__PURE__*/ jsx(UXDivider, {}),
-                        /*#__PURE__*/ jsx(CustomThemeConfig, {})
+                        /*#__PURE__*/ jsx(CustomThemeConfig, {
+                            colorChangeMode: colorChangeMode
+                        })
                     ]
                 }),
                 /*#__PURE__*/ jsx(UXDivider, {}),

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

@@ -6,10 +6,11 @@ export declare const useTheme: () => {
     theme: ThemeItemType;
     customTheme: ThemeItemType;
     setTheme: (theme: ThemeItemType) => void;
+    initTheme: () => void;
     setCustomTheme: (customTheme: ThemeItemType) => void;
     fontUrl: string;
     setFontUrl: (link: string) => void;
     clearFontUrl: () => void;
-    fontLoadStatus: import("./use-theme-store").FontLoadStatus;
+    fontLoadStatus: import("@particle-network/ui-shared").FontLoadStatus;
     fontName: string;
 };

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

@@ -1,6 +1,5 @@
-import { useEffect } from "react";
+import { useThemeStore } from "@particle-network/ui-shared";
 import { useDebounceFn } from "ahooks";
-import { useThemeStore } from "./use-theme-store.js";
 import { applyFont, applyTheme, extractFontFamilyFromLink, preloadFonts } from "./utils.js";
 const useTheme = ()=>{
     const theme = useThemeStore((state)=>state.theme);
@@ -42,16 +41,11 @@ const useTheme = ()=>{
     const { run: debouncedApplyFont } = useDebounceFn((customFontLink, themeFontName)=>applyFontWithStatus(customFontLink, themeFontName), {
         wait: 300
     });
-    useEffect(()=>{
+    const initTheme = ()=>{
         preloadFonts();
         applyTheme(theme);
         debouncedApplyFont(fontUrl, theme.fontName);
-    }, []);
-    useEffect(()=>{
-        applyTheme(theme);
-    }, [
-        theme
-    ]);
+    };
     const setTheme = (theme)=>{
         storeSetTheme(theme);
         applyTheme(theme);
@@ -71,6 +65,7 @@ const useTheme = ()=>{
         theme,
         customTheme,
         setTheme,
+        initTheme,
         setCustomTheme: storeSetCustomTheme,
         fontUrl,
         setFontUrl,

package/dist/components/UXThemeSwitch/utils.js

@@ -1,4 +1,4 @@
-import { hexColorToHSLValue, themeKeys } from "@particle-network/ui-shared";
+import { hexColorToHSLValue, objectEntries, themeData, themeKeys } from "@particle-network/ui-shared";
 import { readableColor } from "color2k";
 import { generateThemeColor } from "../../heroui/utils/colors.js";
 import { DEFAULT_FONT_FAMILY, PRELOAD_FONTS_URL } from "./constants.js";
@@ -12,10 +12,17 @@ const getCSSProperties = (theme)=>{
             ]
         ],
         secondary: [
-            ...generateThemeColor(colorVariables.secondary, 'secondary', theme.colorScheme).cssVariables,
+            [
+                '--heroui-secondary',
+                colorVariables.secondary
+            ],
             [
                 '--heroui-foreground-300',
                 colorVariables.secondary
+            ],
+            [
+                '--heroui-secondary-foreground',
+                readableColor(colorVariables.secondary)
             ]
         ],
         tertiary: [
@@ -33,8 +40,26 @@ const getCSSProperties = (theme)=>{
             ]
         ],
         primary: generateThemeColor(colorVariables.primary, 'primary', theme.colorScheme).cssVariables,
-        success: generateThemeColor(colorVariables.success, 'success', theme.colorScheme).cssVariables,
-        danger: generateThemeColor(colorVariables.danger, 'danger', theme.colorScheme).cssVariables,
+        success: [
+            [
+                '--heroui-success',
+                colorVariables.success
+            ],
+            [
+                '--heroui-success-foreground',
+                readableColor(colorVariables.success)
+            ]
+        ],
+        danger: [
+            [
+                '--heroui-danger',
+                colorVariables.danger
+            ],
+            [
+                '--heroui-danger-foreground',
+                readableColor(colorVariables.danger)
+            ]
+        ],
         alert: [
             [
                 '--heroui-alert',
@@ -45,7 +70,16 @@ const getCSSProperties = (theme)=>{
                 readableColor(colorVariables.alert)
             ]
         ],
-        warning: generateThemeColor(colorVariables.warning, 'warning', theme.colorScheme).cssVariables,
+        warning: [
+            [
+                '--heroui-warning',
+                colorVariables.warning
+            ],
+            [
+                '--heroui-warning-foreground',
+                readableColor(colorVariables.warning)
+            ]
+        ],
         blue: [
             [
                 '--heroui-blue',
@@ -56,32 +90,32 @@ const getCSSProperties = (theme)=>{
                 readableColor(colorVariables.blue)
             ]
         ],
-        'bg-default': [
+        bgDefault: [
             [
                 '--heroui-background',
-                colorVariables['bg-default']
+                colorVariables.bgDefault
             ],
             [
                 '--heroui-background-500',
-                colorVariables['bg-default']
+                colorVariables.bgDefault
             ]
         ],
-        'bg-200': [
+        bg200: [
             [
                 '--heroui-background-200',
-                colorVariables['bg-200']
+                colorVariables.bg200
             ]
         ],
-        'bg-300': [
+        bg300: [
             [
                 '--heroui-background-300',
-                colorVariables['bg-300']
+                colorVariables.bg300
             ]
         ],
-        'bg-400': [
+        bg400: [
             [
                 '--heroui-background-400',
-                colorVariables['bg-400']
+                colorVariables.bg400
             ]
         ],
         cursor: [
@@ -161,8 +195,11 @@ const setCSSProperty = (property, value)=>{
 };
 const applyCustomThemeColors = (theme)=>{
     if ('undefined' == typeof window) return;
+    const baseThemeColors = themeData.find((t)=>t.id === theme.baseThemeId).colorVariables;
+    const customThemeColors = theme.colorVariables;
     const cssProperties = getCSSProperties(theme);
-    Object.entries(cssProperties).forEach(([, value])=>{
+    objectEntries(cssProperties).forEach(([colorKey, value])=>{
+        if (baseThemeColors[colorKey] === customThemeColors[colorKey]) return;
         value.forEach(([variable, value])=>{
             setCSSProperty(variable, value);
         });

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

@@ -12,7 +12,7 @@ export declare const toast: {
     error: (message: ReactNode, props?: Partial<ToastProps>) => string | null;
     loading: (message: ReactNode, props?: Partial<ToastProps>) => string | null;
     show: (props?: Partial<ToastProps> & {
-        type: UXToastType;
+        type?: UXToastType;
     }) => string | null;
     closeAll: () => void;
     close: (key: string) => void;

package/dist/components/UXToast/index.js

@@ -5,6 +5,7 @@ import CircleCloseIcon from "@particle-network/icons/web/CircleCloseIcon";
 import CloseIcon from "@particle-network/icons/web/CloseIcon";
 import { hasLongWord } from "../../utils/index.js";
 import { UXSpinner } from "../UXSpinner/index.js";
+import { WrapText } from "../WrapText/index.js";
 const UXToastProvider = ()=>/*#__PURE__*/ jsx(ToastProvider, {
         disableAnimation: true,
         placement: "top-center",
@@ -13,7 +14,7 @@ const UXToastProvider = ()=>/*#__PURE__*/ jsx(ToastProvider, {
             timeout: 4000
         },
         regionProps: {
-            className: 'items-center mt-12 p-0 gap-2'
+            className: 'items-center mt-12 p-0 gap-2 z-[9999999999]'
         }
     });
 const getIcon = (type)=>{
@@ -32,19 +33,25 @@ const getIcon = (type)=>{
     return null;
 };
 const show = (props)=>{
-    const { type, hideCloseButton, icon, variant, classNames, description, ...toastProps } = props ?? {};
-    const { base, description: descriptionClassName, icon: iconClassName, loadingComponent, content, closeButton, ...restClassNames } = classNames ?? {};
+    const { type = 'info', hideCloseButton, icon, variant, classNames, title, description, ...toastProps } = props ?? {};
+    const { base, title: titleClassName, description: descriptionClassName, icon: iconClassName, loadingComponent, content, closeButton, ...restClassNames } = classNames ?? {};
     return addToast({
         classNames: {
             base: [
-                'bg-cursor rounded-xl px-3.5 py-3 shadow-none border-none !w-fit max-w-[90vw] md:max-w-[400px] m-0',
+                'bg-cursor rounded-xl px-3.5 shadow-none min-h-11 border-none !w-fit max-w-[90vw] md:max-w-[400px] m-0',
                 !hideCloseButton && 'pr-12',
                 'flat' === variant && 'success' === type && 'bg-[#0E3728]',
                 'flat' === variant && 'error' === type && 'bg-[#501D1D]',
                 base
             ],
+            title: [
+                'text-cursor-foreground text-xs font-medium leading-4 !whitespace-normal me-0 line-clamp-2',
+                hasLongWord(title) && 'break-all',
+                'flat' === variant && 'text-white',
+                titleClassName
+            ],
             description: [
-                'text-cursor-foreground text-xs font-medium me-0 leading-4 line-clamp-4',
+                'text-secondary !text-body3 me-0 leading-4',
                 'flat' === variant && 'text-white',
                 hasLongWord(description) && 'break-all',
                 descriptionClassName
@@ -68,7 +75,12 @@ const show = (props)=>{
             ],
             ...restClassNames
         },
-        description,
+        title: /*#__PURE__*/ jsx(WrapText, {
+            children: title
+        }),
+        description: /*#__PURE__*/ jsx(WrapText, {
+            children: description
+        }),
         icon: icon ?? getIcon(type),
         hideIcon: !icon && !getIcon(type),
         closeIcon: /*#__PURE__*/ jsx(CloseIcon, {
@@ -84,22 +96,22 @@ const show = (props)=>{
 const toast = {
     info: (message, props)=>show({
             type: 'info',
-            description: message,
+            title: message,
             ...props
         }),
     success: (message, props)=>show({
             type: 'success',
-            description: message,
+            title: message,
             ...props
         }),
     error: (message, props)=>show({
             type: 'error',
-            description: message,
+            title: message,
             ...props
         }),
     loading: (message, props)=>show({
             type: 'loading',
-            description: message,
+            title: message,
             ...props
         }),
     show,

package/dist/components/UXTooltip/index.js

@@ -1,23 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import { hasLongWord } from "../../utils/index.js";
+import { WrapText } from "../WrapText/index.js";
 import tooltip_extend from "./tooltip.extend.js";
-const renderContent = (content)=>{
-    if (!content) return null;
-    if ('string' != typeof content) return content;
-    if (!content.includes('\n')) return content;
-    return content.split('\n').flatMap((x, i, arr)=>i < arr.length - 1 ? [
-            x,
-            /*#__PURE__*/ jsx("br", {}, i)
-        ] : [
-            x
-        ]);
-};
 const UXTooltip = (props)=>{
     const { content, classNames, ...restProps } = props;
     const { content: contentClassName, ...restClassNames } = classNames ?? {};
     return /*#__PURE__*/ jsx(tooltip_extend, {
-        content: renderContent(content),
+        content: /*#__PURE__*/ jsx(WrapText, {
+            children: content
+        }),
         classNames: {
             content: [
                 hasLongWord(content) && 'break-all',

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface WarpTextProps {
+    children: React.ReactNode;
+}
+export declare const WrapText: (props: WarpTextProps) => string | number | bigint | true | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | (string | import("react/jsx-runtime").JSX.Element)[] | null;
+export {};

package/dist/components/WrapText/index.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const WrapText = (props)=>{
+    const { children } = props;
+    if (!children) return null;
+    if ('string' != typeof children) return children;
+    if (!children.includes('\n')) return children;
+    return children.split('\n').flatMap((x, i, arr)=>i < arr.length - 1 ? [
+            x,
+            /*#__PURE__*/ jsx("br", {}, i)
+        ] : [
+            x
+        ]);
+};
+export { WrapText };

package/dist/components/index.d.ts

@@ -21,6 +21,7 @@ export * from './UXNumberInput';
 export * from './UXPagination';
 export * from './UXPopover';
 export * from './UXRadio';
+export * from './UXRangeInput';
 export * from './UXSelect';
 export * from './UXSlider';
 export * from './UXSpinner';
@@ -32,3 +33,4 @@ export * from './UXTextarea';
 export * from './UXThemeSwitch';
 export * from './UXToast';
 export * from './UXTooltip';
+export * from './WrapText';

package/dist/components/index.js

@@ -21,6 +21,7 @@ export * from "./UXNumberInput/index.js";
 export * from "./UXPagination/index.js";
 export * from "./UXPopover/index.js";
 export * from "./UXRadio/index.js";
+export * from "./UXRangeInput/index.js";
 export * from "./UXSelect/index.js";
 export * from "./UXSlider/index.js";
 export * from "./UXSpinner/index.js";
@@ -32,3 +33,4 @@ export * from "./UXTextarea/index.js";
 export * from "./UXThemeSwitch/index.js";
 export * from "./UXToast/index.js";
 export * from "./UXTooltip/index.js";
+export * from "./WrapText/index.js";

package/dist/components/layout/Box/box-theme.d.ts

@@ -231,15 +231,11 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         0: string;
         1: string;
-        2: string;
-        3: string;
     };
     shrink: {
         true: string;
         0: string;
         1: string;
-        2: string;
-        3: string;
     };
     order: {
         first: string;
@@ -608,8 +604,8 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
     bg: {
         current: string;
         transparent: string;
-        default: string;
-        pure: string;
+        bgDefault: string;
+        bgPure: string;
         bg100: string;
         bg200: string;
         bg300: string;
@@ -705,15 +701,25 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         divider: string;
         foreground: string;
         secondary: string;
+        secondaryForeground: string;
         tertiary: string;
+        tertiaryForeground: string;
         cursor: string;
+        cursorForeground: string;
         primary: string;
+        primaryForeground: string;
         success: string;
+        successForeground: string;
         warning: string;
+        warningForeground: string;
         danger: string;
+        dangerForeground: string;
         alert: string;
+        alertForeground: string;
         bullish: string;
+        bullishForeground: string;
         bearish: string;
+        bearishForeground: string;
     };
     fontWeight: {
         normal: string;
@@ -961,15 +967,11 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         0: string;
         1: string;
-        2: string;
-        3: string;
     };
     shrink: {
         true: string;
         0: string;
         1: string;
-        2: string;
-        3: string;
     };
     order: {
         first: string;
@@ -1338,8 +1340,8 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
     bg: {
         current: string;
         transparent: string;
-        default: string;
-        pure: string;
+        bgDefault: string;
+        bgPure: string;
         bg100: string;
         bg200: string;
         bg300: string;
@@ -1435,15 +1437,25 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         divider: string;
         foreground: string;
         secondary: string;
+        secondaryForeground: string;
         tertiary: string;
+        tertiaryForeground: string;
         cursor: string;
+        cursorForeground: string;
         primary: string;
+        primaryForeground: string;
         success: string;
+        successForeground: string;
         warning: string;
+        warningForeground: string;
         danger: string;
+        dangerForeground: string;
         alert: string;
+        alertForeground: string;
         bullish: string;
+        bullishForeground: string;
         bearish: string;
+        bearishForeground: string;
     };
     fontWeight: {
         normal: string;
@@ -1691,15 +1703,11 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         0: string;
         1: string;
-        2: string;
-        3: string;
     };
     shrink: {
         true: string;
         0: string;
         1: string;
-        2: string;
-        3: string;
     };
     order: {
         first: string;
@@ -2068,8 +2076,8 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
     bg: {
         current: string;
         transparent: string;
-        default: string;
-        pure: string;
+        bgDefault: string;
+        bgPure: string;
         bg100: string;
         bg200: string;
         bg300: string;
@@ -2165,15 +2173,25 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         divider: string;
         foreground: string;
         secondary: string;
+        secondaryForeground: string;
         tertiary: string;
+        tertiaryForeground: string;
         cursor: string;
+        cursorForeground: string;
         primary: string;
+        primaryForeground: string;
         success: string;
+        successForeground: string;
         warning: string;
+        warningForeground: string;
         danger: string;
+        dangerForeground: string;
         alert: string;
+        alertForeground: string;
         bullish: string;
+        bullishForeground: string;
         bearish: string;
+        bearishForeground: string;
     };
     fontWeight: {
         normal: string;