@particle-network/ui-react 0.3.2-beta.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

@@ -1,13 +1,22 @@
 import { useLang } from "./useLang.js";
 const en = {
     table: {
-        emptyContent: 'No data available.'
+        emptyContent: 'No data'
     },
     copy: {
         copy: 'Copy',
         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/icons/index.js

@@ -49,16 +49,27 @@ const EmptyIcon = ({ size = 16, color = 'currentColor', ...props })=>/*#__PURE__
         children: [
             /*#__PURE__*/ jsx("path", {
                 opacity: "0.1",
-                d: "M2.2417 20.723C2.2417 21.4283 6.81537 21.9999 12.4573 21.9999C18.0992 21.9999 22.6729 21.4283 22.6729 20.723C22.6729 20.0177 18.0992 19.446 12.4573 19.446C6.81537 19.446 2.2417 20.0177 2.2417 20.723Z",
+                d: "M1.93335 20.9998C1.93335 21.3535 3.05716 21.6926 5.05754 21.9426C7.05793 22.1927 9.77104 22.3332 12.6 22.3332C15.429 22.3332 18.1421 22.1927 20.1425 21.9426C22.1429 21.6926 23.2667 21.3535 23.2667 20.9998C23.2667 20.6462 22.1429 20.3071 20.1425 20.057C18.1421 19.807 15.429 19.6665 12.6 19.6665C9.77104 19.6665 7.05793 19.807 5.05754 20.057C3.05716 20.3071 1.93335 20.6462 1.93335 20.9998Z",
                 fill: getColor(color)
             }),
             /*#__PURE__*/ jsx("path", {
-                d: "M2 8.57303C2 8.79011 2.166 8.95612 2.38308 8.95612C2.60017 8.95612 2.76617 8.79011 2.76617 8.57303C2.76617 8.35596 2.60017 8.18995 2.38308 8.18995C2.17877 8.18995 2 8.36872 2 8.57303ZM22.7999 19.1269C22.3147 19.2548 22.2127 19.3568 22.0976 19.8292C21.9697 19.344 21.8677 19.242 21.3951 19.1269C21.8675 18.999 21.9825 18.8971 22.0976 18.4246C22.2125 18.8971 22.3147 19.012 22.7999 19.1269ZM4.13251 7.23225C3.5068 7.39825 3.37911 7.52595 3.2131 8.15165C3.0471 7.52595 2.9194 7.39825 2.2937 7.23225C2.9194 7.06625 3.0471 6.92579 3.2131 6.31286C3.36634 6.93856 3.5068 7.06625 4.13251 7.23225ZM20.653 5.43496C20.27 5.53712 20.1931 5.61373 20.0912 5.99681C19.989 5.61373 19.9124 5.53712 19.5293 5.43496C19.9126 5.33281 19.9892 5.25619 20.0912 4.87311C20.1806 5.25619 20.27 5.33281 20.653 5.43496ZM22.3003 3.46848C21.3043 3.72387 21.1 3.94094 20.832 4.93696C20.5764 3.94094 20.3593 3.73663 19.3635 3.46848C20.3593 3.21309 20.5639 2.99601 20.832 2C21.0872 2.98324 21.3043 3.20032 22.3003 3.46848ZM21.1399 12.9402V12.9144C21.1399 12.8891 21.1273 12.8763 21.1273 12.8508V12.838L18.3815 6.87152C18.19 6.28087 17.8161 5.76615 17.3137 5.40134C16.8112 5.03653 16.2061 4.84041 15.5851 4.84119H9.34087C8.06392 4.84119 6.9402 5.65843 6.54434 6.87152L3.7989 12.838V12.8506C3.78613 12.8761 3.78613 12.8889 3.78613 12.9142V18.0732C3.78613 19.6948 5.10139 20.2119 6.72312 20.2119H18.2155C19.8374 20.2119 21.1526 19.6948 21.1526 18.0732V12.9657C21.1399 12.9531 21.1399 12.9531 21.1399 12.9402ZM7.25944 7.13967C7.25944 7.13967 7.25944 7.1269 7.27221 7.1269C7.55314 6.20751 8.39592 5.60735 9.34087 5.60735H15.5724C16.5171 5.60735 17.3601 6.20751 17.6538 7.11413C17.6538 7.11413 17.6538 7.1269 17.6664 7.1269L20.2075 12.57H14.372C14.155 12.57 13.989 12.736 13.989 12.9531C13.989 13.7957 13.2996 14.4855 12.4566 14.4855C11.6138 14.4855 10.9243 13.7957 10.9243 12.9531C10.9243 12.736 10.7583 12.57 10.5412 12.57H4.71831L7.25944 7.13967ZM20.3737 18.0736C20.3737 19.274 19.4034 19.4462 18.2029 19.4462H6.71035C5.51002 19.4462 4.53953 19.274 4.53953 18.0736V13.3488H10.1964C10.3752 14.4342 11.3201 15.2644 12.4566 15.2644C13.5929 15.2644 14.5381 14.4344 14.7168 13.3488H20.3737V18.0736Z",
+                opacity: "0.5",
+                d: "M23.2663 18.5465C22.8663 18.6532 22.773 18.7332 22.6663 19.1465C22.5597 18.7465 22.4797 18.6532 22.0663 18.5465C22.4663 18.4398 22.5597 18.3465 22.6663 17.9465C22.773 18.3465 22.853 18.4398 23.2663 18.5465ZM20.4663 3.19984C19.4263 3.4665 19.213 3.69317 18.933 4.73317C18.6663 3.69317 18.4397 3.47984 17.3997 3.19984C18.4397 2.93317 18.653 2.7065 18.933 1.6665C19.1997 2.69317 19.4263 2.91984 20.4663 3.19984Z",
                 fill: getColor(color)
             }),
             /*#__PURE__*/ jsx("path", {
                 opacity: "0.2",
-                d: "M12.4562 13.6042C12.3721 13.605 12.2887 13.5891 12.2109 13.5573C12.133 13.5255 12.0623 13.4785 12.0029 13.419C11.9434 13.3596 11.8964 13.2889 11.8646 13.211C11.8328 13.1332 11.8169 13.0498 11.8177 12.9657V11.6888H6.00757L8.10177 7.42061L8.11454 7.39508C8.29331 6.85876 8.77855 6.50122 9.34041 6.50122H15.5719C16.1336 6.50122 16.6188 6.85876 16.7978 7.39508L16.8106 7.42061L18.9048 11.6888H13.0946V12.9657C13.0946 13.3233 12.8137 13.6042 12.4562 13.6042Z",
+                d: "M0.733398 4.02687V4.14687L1.70673 5.0802L5.50673 3.22687L2.08007 5.42687V6.50687L2.62673 5.97353V5.9602L2.64007 5.97353L3.18673 6.50687L6.1334 2.9202V2.78687L0.733398 4.02687Z",
+                fill: getColor(color)
+            }),
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.5",
+                d: "M22.8797 9.21319C22.573 8.06652 21.0663 7.38652 18.6397 7.29319C16.8663 4.86652 13.733 3.63985 10.653 4.46652C7.57299 5.29319 5.49299 7.93319 5.18632 10.9199C3.13299 12.2132 2.17299 13.5599 2.49299 14.7065C2.81299 15.9199 4.43965 16.5999 7.06632 16.6399C8.89299 18.6532 11.7463 19.6132 14.5463 18.8532C17.3463 18.0932 19.3463 15.8399 19.9063 13.1732C22.1463 11.8265 23.1997 10.4265 22.8797 9.21319ZM10.9063 5.37319C14.373 4.43985 17.9597 6.50652 18.9063 9.97319C19.1463 10.8532 19.1863 11.7465 19.0663 12.5999C17.533 13.4665 15.5463 14.2532 13.4663 14.8132C11.373 15.3732 9.26632 15.6932 7.50632 15.7199C6.97299 15.0399 6.55965 14.2532 6.31965 13.3732C5.35965 9.89319 7.42632 6.30652 10.9063 5.37319ZM3.38632 14.4665C3.22632 13.8532 3.89299 12.9599 5.15965 12.0532C5.18632 12.5599 5.26632 13.0799 5.39965 13.5999C5.59965 14.3599 5.91965 15.0532 6.31965 15.6799C4.65299 15.5599 3.55965 15.1199 3.38632 14.4665ZM14.293 17.9599C12.133 18.5465 9.93299 17.9599 8.35965 16.6132C10.013 16.5199 11.8263 16.2132 13.693 15.7065C15.5597 15.1999 17.2797 14.5599 18.7597 13.8132C18.0663 15.7732 16.453 17.3865 14.293 17.9599ZM20.053 11.9865C20.0797 11.2399 19.9997 10.4799 19.7997 9.73319C19.6663 9.21319 19.4663 8.73319 19.2397 8.27985C20.7863 8.42652 21.813 8.85319 21.9863 9.46652C22.1463 10.1065 21.4263 11.0399 20.053 11.9865Z",
+                fill: getColor(color)
+            }),
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.2",
+                d: "M11.1865 6.41338C8.29319 7.20005 6.57319 10.1867 7.35985 13.08C8.14652 15.9734 11.1332 17.6934 14.0265 16.9067C16.9199 16.12 18.6399 13.1334 17.8532 10.24C17.0665 7.34672 14.0799 5.64005 11.1865 6.41338ZM14.6932 8.78672C14.7599 9.04005 14.6132 9.29338 14.3599 9.36005C14.1065 9.42672 13.8532 9.28005 13.7865 9.02672C13.7199 8.77338 13.8665 8.52005 14.1199 8.45338C14.3732 8.40005 14.6265 8.54672 14.6932 8.78672Z",
                 fill: getColor(color)
             })
         ]

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-beta.2",
+  "version": "0.4.0-beta.0",
   "type": "module",
   "exports": {
     ".": {
@@ -39,8 +39,8 @@
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
     "typescript": "^5.8.3",
-    "@particle-network/eslint-config": "0.3.0",
-    "@particle-network/lintstaged-config": "0.1.0"
+    "@particle-network/lintstaged-config": "0.1.0",
+    "@particle-network/eslint-config": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -49,7 +49,8 @@
   "dependencies": {
     "ahooks": "^3.9.4",
     "copy-to-clipboard": "^3.3.3",
-    "@particle-network/icons": "0.3.0",
+    "zustand": "^5.0.8",
+    "@particle-network/icons": "0.3.1",
     "@particle-network/ui-shared": "0.2.0"
   },
   "scripts": {