@particle-network/ui-react 0.5.1-beta.2 → 0.5.1-beta.21

package/dist/components/UXThemeSwitch/utils.d.ts

@@ -0,0 +1,28 @@
+import { type ThemeItemType } from '@particle-network/ui-shared';
+/**
+ * 初始化并预加载字体 CSS（仅执行一次）
+ */
+export declare const preloadFonts: () => void;
+export declare const setCSSProperty: (property: string, value: string) => void;
+/**
+ * 应用自定义主题的颜色到 CSS 变量
+ */
+export declare const applyCustomThemeColors: (theme: ThemeItemType) => void;
+/**
+ * 清除自定义主题的 CSS 变量（切换到其他主题时）
+ */
+export declare const clearCustomThemeColors: () => void;
+/**
+ * 应用主题到文档根元素
+ */
+export declare const applyTheme: (theme: ThemeItemType) => void;
+/**
+ * 从 Google Fonts 链接中提取字体名称
+ * 例如: https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
+ * 提取: Roboto
+ */
+export declare const extractFontFamilyFromLink: (link: string) => string | null;
+/**
+ * 应用字体到 DOM
+ */
+export declare const applyFont: (fontName: string | undefined) => void;

package/dist/components/UXThemeSwitch/utils.js

@@ -0,0 +1,260 @@
+import { hexColorToHSLValue, themeData, themeKeys } from "@particle-network/ui-shared";
+import { readableColor } from "color2k";
+import { generateThemeColor } from "../../heroui/utils/colors.js";
+import { objectEntries } from "../../utils/index.js";
+import { DEFAULT_FONT_FAMILY, PRELOAD_FONTS_URL } from "./constants.js";
+const getCSSProperties = (theme)=>{
+    const { colorVariables } = theme;
+    return {
+        foreground: [
+            [
+                '--heroui-foreground',
+                colorVariables.foreground
+            ]
+        ],
+        secondary: [
+            [
+                '--heroui-secondary',
+                colorVariables.secondary
+            ],
+            [
+                '--heroui-foreground-300',
+                colorVariables.secondary
+            ],
+            [
+                '--heroui-secondary-foreground',
+                readableColor(colorVariables.secondary)
+            ]
+        ],
+        tertiary: [
+            [
+                '--heroui-tertiary',
+                colorVariables.tertiary
+            ],
+            [
+                '--heroui-foreground-100',
+                colorVariables.tertiary
+            ],
+            [
+                '--heroui-tertiary-foreground',
+                readableColor(colorVariables.tertiary)
+            ]
+        ],
+        primary: generateThemeColor(colorVariables.primary, 'primary', 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',
+                colorVariables.alert
+            ],
+            [
+                '--heroui-alert-foreground',
+                readableColor(colorVariables.alert)
+            ]
+        ],
+        warning: [
+            [
+                '--heroui-warning',
+                colorVariables.warning
+            ],
+            [
+                '--heroui-warning-foreground',
+                readableColor(colorVariables.warning)
+            ]
+        ],
+        blue: [
+            [
+                '--heroui-blue',
+                colorVariables.blue
+            ],
+            [
+                '--heroui-blue-foreground',
+                readableColor(colorVariables.blue)
+            ]
+        ],
+        bgDefault: [
+            [
+                '--heroui-background',
+                colorVariables.bgDefault
+            ],
+            [
+                '--heroui-background-500',
+                colorVariables.bgDefault
+            ]
+        ],
+        bg200: [
+            [
+                '--heroui-background-200',
+                colorVariables.bg200
+            ]
+        ],
+        bg300: [
+            [
+                '--heroui-background-300',
+                colorVariables.bg300
+            ]
+        ],
+        bg400: [
+            [
+                '--heroui-background-400',
+                colorVariables.bg400
+            ]
+        ],
+        cursor: [
+            [
+                '--heroui-cursor',
+                colorVariables.cursor
+            ],
+            [
+                '--heroui-cursor-foreground',
+                readableColor(colorVariables.cursor)
+            ]
+        ],
+        overlay: [
+            [
+                '--heroui-overlay',
+                colorVariables.overlay
+            ],
+            [
+                '--heroui-content1',
+                colorVariables.overlay
+            ],
+            [
+                '--heroui-overlay-foreground',
+                readableColor(colorVariables.overlay)
+            ],
+            [
+                '--heroui-content1-foreground',
+                readableColor(colorVariables.overlay)
+            ]
+        ],
+        divider: [
+            [
+                '--heroui-divider',
+                colorVariables.divider
+            ],
+            [
+                '--heroui-divider-foreground',
+                readableColor(colorVariables.divider)
+            ]
+        ],
+        bullish: [
+            [
+                '--heroui-bullish',
+                colorVariables.bullish
+            ],
+            [
+                '--heroui-bullish-foreground',
+                readableColor(colorVariables.bullish)
+            ]
+        ],
+        bearish: [
+            [
+                '--heroui-bearish',
+                colorVariables.bearish
+            ],
+            [
+                '--heroui-bearish-foreground',
+                readableColor(colorVariables.bearish)
+            ]
+        ]
+    };
+};
+const preloadFonts = ()=>{
+    if ('undefined' == typeof window) return;
+    const existingLink = document.getElementById('ux-preload-fonts-link');
+    if (existingLink) return;
+    const linkElement = document.createElement('link');
+    linkElement.id = 'ux-preload-fonts-link';
+    linkElement.rel = 'stylesheet';
+    linkElement.href = PRELOAD_FONTS_URL;
+    document.head.appendChild(linkElement);
+};
+const setCSSProperty = (property, value)=>{
+    if ('undefined' == typeof window) return;
+    const root = document.documentElement;
+    root.style.setProperty(property, hexColorToHSLValue(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);
+    objectEntries(cssProperties).forEach(([colorKey, value])=>{
+        if (baseThemeColors[colorKey] === customThemeColors[colorKey]) return;
+        value.forEach(([variable, value])=>{
+            setCSSProperty(variable, value);
+        });
+    });
+};
+const clearCustomThemeColors = ()=>{
+    if ('undefined' == typeof window) return;
+    const rootStyles = getComputedStyle(document.documentElement);
+    Array.from(rootStyles).filter((prop)=>prop.startsWith('--heroui')).forEach((prop)=>{
+        document.documentElement.style.removeProperty(prop);
+    });
+};
+const applyTheme = (theme)=>{
+    if ('undefined' == typeof window) return;
+    const root = document.documentElement;
+    const isClassListCorrect = root.classList.contains(theme.id);
+    const isDataThemeCorrect = root.getAttribute('data-theme') === theme.colorScheme;
+    const isDataPrefersColorCorrect = root.getAttribute('data-prefers-color') === theme.colorScheme;
+    if ('custom' === theme.id) {
+        clearCustomThemeColors();
+        applyCustomThemeColors(theme);
+    } else clearCustomThemeColors();
+    if (isClassListCorrect && isDataThemeCorrect && isDataPrefersColorCorrect && 'custom' !== theme.id) return;
+    if (!isDataThemeCorrect) root.setAttribute('data-theme', theme.colorScheme);
+    if (!isDataPrefersColorCorrect) root.setAttribute('data-prefers-color', theme.colorScheme);
+    root.classList.remove('dark');
+    root.classList.remove('light');
+    if (!isClassListCorrect) {
+        themeKeys.forEach((key)=>{
+            root.classList.remove(key);
+        });
+        root.classList.add('custom' === theme.id ? theme.baseThemeId : theme.id);
+    }
+};
+const extractFontFamilyFromLink = (link)=>{
+    if (!link) return null;
+    try {
+        const url = new URL(link);
+        const familyParam = url.searchParams.get('family');
+        if (!familyParam) return null;
+        const firstFamily = familyParam.split('&family=')[0].split(':')[0].replace(/\+/g, ' ');
+        return firstFamily;
+    } catch  {
+        return null;
+    }
+};
+const applyFont = (fontName)=>{
+    if ('undefined' == typeof window) return;
+    if (fontName) {
+        document.documentElement.style.setProperty('--ux-font-family', `"${fontName}", ${DEFAULT_FONT_FAMILY}`);
+        document.body.style.fontFamily = `"${fontName}", ${DEFAULT_FONT_FAMILY}`;
+    } else {
+        document.documentElement.style.setProperty('--ux-font-family', DEFAULT_FONT_FAMILY);
+        document.body.style.fontFamily = DEFAULT_FONT_FAMILY;
+    }
+};
+export { applyCustomThemeColors, applyFont, applyTheme, clearCustomThemeColors, extractFontFamilyFromLink, preloadFonts, setCSSProperty };

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-tertiary 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-tertiary-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,11 +75,16 @@ 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, {
-            className: 'flat' === variant ? 'text-white' : 'text-tertiary-foreground'
+            className: 'flat' === variant ? 'text-white' : 'text-cursor-foreground'
         }),
         loadingComponent: /*#__PURE__*/ jsx(UXSpinner, {
             size: 18
@@ -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

@@ -32,3 +32,4 @@ export * from './UXTextarea';
 export * from './UXThemeSwitch';
 export * from './UXToast';
 export * from './UXTooltip';
+export * from './WrapText';

package/dist/components/index.js

@@ -32,3 +32,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";