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

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

@@ -0,0 +1,40 @@
+import { type ThemeItemType } from './theme-data';
+interface State {
+    /**
+     * 临时选中的 theme（用于预览）
+     */
+    selectedTheme: ThemeItemType;
+    /**
+     * 保存的主题
+     */
+    savedTheme: ThemeItemType;
+    /**
+     * 临时输入的字体链接（用于预览）
+     */
+    selectedFontLink: string;
+    /**
+     * 保存的字体链接
+     */
+    savedFontLink: string;
+}
+interface Actions {
+    setSelectedTheme: (theme: ThemeItemType) => void;
+    setSavedTheme: (theme: ThemeItemType) => void;
+    setSelectedFontLink: (link: string) => void;
+    setSavedFontLink: (link: string) => void;
+}
+type ThemeStore = State & Actions;
+export declare const useThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ThemeStore>, "setState" | "persist"> & {
+    setState(partial: ThemeStore | Partial<ThemeStore> | ((state: ThemeStore) => ThemeStore | Partial<ThemeStore>), replace?: false | undefined): unknown;
+    setState(state: ThemeStore | ((state: ThemeStore) => ThemeStore), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ThemeStore, unknown, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ThemeStore) => void) => () => void;
+        onFinishHydration: (fn: (state: ThemeStore) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeStore, unknown, unknown>>;
+    };
+}>;
+export {};

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

@@ -0,0 +1,25 @@
+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: '',
+        setSelectedTheme: (theme)=>set({
+                selectedTheme: theme
+            }),
+        setSavedTheme: (theme)=>set({
+                savedTheme: theme
+            }),
+        setSelectedFontLink: (link)=>set({
+                selectedFontLink: link
+            }),
+        setSavedFontLink: (link)=>set({
+                savedFontLink: link
+            })
+    }), {
+    name: 'ux-theme',
+    storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {})
+}));
+export { useThemeStore };

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

@@ -0,0 +1,14 @@
+import { type ThemeItemType } from './theme-data';
+/**
+ * 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;
+};

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

@@ -0,0 +1,90 @@
+import { useEffect } from "react";
+import { themeKeys } from "./theme-data.js";
+import { useThemeStore } from "./use-theme-store.js";
+const DEFAULT_FONT_FAMILY = 'ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji';
+const applyTheme = (theme)=>{
+    if ('undefined' == typeof window) return;
+    const root = document.documentElement;
+    root.setAttribute('data-theme', theme.colorScheme);
+    root.setAttribute('data-prefers-color', theme.colorScheme);
+    themeKeys.forEach((key)=>{
+        root.classList.remove(key);
+    });
+    root.classList.add(theme.key);
+};
+const extractFontFamilyFromLink = (link)=>{
+    if (!link) return null;
+    try {
+        const url = new URL(link);
+        const familyParam = url.searchParams.get('family');
+        if (!familyParam) return null;
+        const fontName = familyParam.split(':')[0].replace(/\+/g, ' ');
+        return fontName;
+    } catch  {
+        return null;
+    }
+};
+const loadGoogleFont = (link)=>{
+    if ('undefined' == typeof window) return;
+    const existingLink = document.getElementById('ux-google-font-link');
+    if (existingLink) existingLink.remove();
+    if (!link?.trim()) {
+        document.documentElement.style.setProperty('--ux-font-family', DEFAULT_FONT_FAMILY);
+        document.body.style.fontFamily = DEFAULT_FONT_FAMILY;
+        return;
+    }
+    const linkElement = document.createElement('link');
+    linkElement.id = 'ux-google-font-link';
+    linkElement.rel = 'stylesheet';
+    linkElement.href = link;
+    document.head.appendChild(linkElement);
+    const fontFamily = extractFontFamilyFromLink(link);
+    if (fontFamily) {
+        document.documentElement.style.setProperty('--ux-font-family', `"${fontFamily}", ${DEFAULT_FONT_FAMILY}`);
+        document.body.style.fontFamily = `"${fontFamily}", ${DEFAULT_FONT_FAMILY}`;
+    }
+};
+const useTheme = ()=>{
+    const selectedTheme = useThemeStore((state)=>state.selectedTheme);
+    const savedTheme = useThemeStore((state)=>state.savedTheme);
+    const selectedFontLink = useThemeStore((state)=>state.selectedFontLink);
+    const savedFontLink = useThemeStore((state)=>state.savedFontLink);
+    const storeSetSelectedTheme = useThemeStore((state)=>state.setSelectedTheme);
+    const storeSetSavedTheme = useThemeStore((state)=>state.setSavedTheme);
+    const storeSetSelectedFontLink = useThemeStore((state)=>state.setSelectedFontLink);
+    const storeSetSavedFontLink = useThemeStore((state)=>state.setSavedFontLink);
+    useEffect(()=>{
+        applyTheme(savedTheme);
+        loadGoogleFont(savedFontLink);
+    }, [
+        savedTheme,
+        savedFontLink
+    ]);
+    const setSelectedTheme = (theme)=>{
+        storeSetSelectedTheme(theme);
+        applyTheme(theme);
+    };
+    const setSavedTheme = (theme)=>{
+        storeSetSavedTheme(theme);
+        applyTheme(theme);
+    };
+    const setSelectedFontLink = (link)=>{
+        storeSetSelectedFontLink(link);
+        loadGoogleFont(link);
+    };
+    const setSavedFontLink = (link)=>{
+        storeSetSavedFontLink(link);
+        loadGoogleFont(link);
+    };
+    return {
+        selectedTheme,
+        setSelectedTheme,
+        savedTheme,
+        setSavedTheme,
+        selectedFontLink,
+        setSelectedFontLink,
+        savedFontLink,
+        setSavedFontLink
+    };
+};
+export { useTheme };

package/dist/components/index.d.ts

@@ -24,5 +24,6 @@ export * from './UXSwitch';
 export * from './UXTable';
 export * from './UXTabs';
 export * from './UXTextarea';
+export * from './UXThemeSwitch';
 export * from './UXToast';
 export * from './UXTooltip';

package/dist/components/index.js

@@ -24,5 +24,6 @@ export * from "./UXSwitch/index.js";
 export * from "./UXTable/index.js";
 export * from "./UXTabs/index.js";
 export * from "./UXTextarea/index.js";
+export * from "./UXThemeSwitch/index.js";
 export * from "./UXToast/index.js";
 export * from "./UXTooltip/index.js";

package/dist/hooks/useI18n.d.ts

@@ -8,4 +8,13 @@ export declare const useI18n: () => {
         error: string;
         address: string;
     };
+    theme: {
+        title: string;
+        reset: string;
+        apply: string;
+        font: {
+            title: string;
+            placeholder: string;
+        };
+    };
 };

package/dist/hooks/useI18n.js

@@ -8,6 +8,15 @@ const en = {
         success: 'Copied successfully!',
         error: 'Copy failed: ',
         address: 'Address copied: '
+    },
+    theme: {
+        title: 'Theme',
+        reset: 'Reset',
+        apply: 'Apply Theme',
+        font: {
+            title: 'Custom Font',
+            placeholder: 'Enter Google Fonts link'
+        }
     }
 };
 const zh = {
@@ -19,6 +28,15 @@ const zh = {
         success: '复制成功！',
         error: '复制失败：',
         address: '地址已复制：'
+    },
+    theme: {
+        title: '主题',
+        reset: '重置',
+        apply: '应用主题',
+        font: {
+            title: '自定义字体',
+            placeholder: '输入 Google Fonts 链接'
+        }
     }
 };
 const useI18n = ()=>{

package/dist/utils/input-classes.d.ts

@@ -263,38 +263,6 @@ export declare const inputClasses: {
         labelPlacement?: undefined;
         radius?: undefined;
         isMultiline?: undefined;
-    } | {
-        isInvalid: boolean;
-        variant: string;
-        class: {
-            inputWrapper: string[];
-            label?: undefined;
-            input?: undefined;
-            innerWrapper?: undefined;
-            stepperButton?: undefined;
-        };
-        size?: undefined;
-        color?: undefined;
-        labelPlacement?: undefined;
-        radius?: undefined;
-        disableAnimation?: undefined;
-        isMultiline?: undefined;
-    } | {
-        isInvalid: boolean;
-        variant: string;
-        class: {
-            inputWrapper: string;
-            label?: undefined;
-            input?: undefined;
-            innerWrapper?: undefined;
-            stepperButton?: undefined;
-        };
-        size?: undefined;
-        color?: undefined;
-        labelPlacement?: undefined;
-        radius?: undefined;
-        disableAnimation?: undefined;
-        isMultiline?: undefined;
     } | {
         labelPlacement: string;
         size: string;

package/dist/utils/input-classes.js

@@ -1,7 +1,7 @@
 const inputClasses = {
     defaultVariants: {
         variant: 'flat',
-        color: 'primary',
+        color: 'default',
         size: 'md',
         fullWidth: true,
         labelPlacement: 'outside',
@@ -75,19 +75,19 @@ const inputClasses = {
         size: {
             sm: {
                 label: 'text-tiny text-foreground-300',
-                inputWrapper: 'text-tiny h-6 min-h-6 px-2 rounded-small',
+                inputWrapper: 'text-tiny h-6 min-h-6 px-2.5 rounded-small',
                 input: 'text-tiny',
                 clearButton: 'text-medium'
             },
             md: {
                 label: 'text-tiny text-foreground-300',
-                inputWrapper: 'text-tiny h-[30px] min-h-[30px] rounded-small',
+                inputWrapper: 'text-tiny h-[30px] min-h-[30px] rounded-small px-2.5',
                 input: 'text-tiny',
                 clearButton: 'text-large'
             },
             lg: {
                 label: 'text-small text-foreground-300',
-                inputWrapper: 'text-small h-11 min-h-11 rounded-medium',
+                inputWrapper: 'text-small h-11 min-h-11 rounded-medium px-2.5',
                 input: 'text-small',
                 clearButton: 'text-large'
             }
@@ -141,7 +141,7 @@ const inputClasses = {
         },
         isInvalid: {
             true: {
-                inputWrapper: 'group-data-[focus=true]:border-danger caret-danger',
+                inputWrapper: 'border border-danger caret-danger !bg-background group-data-[focus=true]:!bg-background group-data-[hover=true]:!bg-background',
                 label: 'text-danger',
                 input: 'placeholder:text-danger text-danger'
             }
@@ -389,24 +389,6 @@ const inputClasses = {
                 inputWrapper: 'transition-colors motion-reduce:transition-none'
             }
         },
-        {
-            isInvalid: true,
-            variant: 'flat',
-            class: {
-                inputWrapper: [
-                    '!bg-danger-50',
-                    'data-[hover=true]:!bg-danger-100',
-                    'group-data-[focus=true]:!bg-danger-50'
-                ]
-            }
-        },
-        {
-            isInvalid: true,
-            variant: 'bordered',
-            class: {
-                inputWrapper: '!border-danger group-data-[focus=true]:!border-danger'
-            }
-        },
         {
             labelPlacement: 'inside',
             size: 'sm',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.3.2",
+  "version": "0.4.0-beta.0",
   "type": "module",
   "exports": {
     ".": {
@@ -49,8 +49,9 @@
   "dependencies": {
     "ahooks": "^3.9.4",
     "copy-to-clipboard": "^3.3.3",
-    "@particle-network/ui-shared": "0.2.0",
-    "@particle-network/icons": "0.3.1"
+    "zustand": "^5.0.8",
+    "@particle-network/icons": "0.3.1",
+    "@particle-network/ui-shared": "0.2.0"
   },
   "scripts": {
     "build": "rslib build",