@particle-network/ui-shared 0.4.1-beta.4 → 0.4.1-beta.6

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './use-color-scheme';
+export * from './use-theme-color';
+export * from './use-theme-store';

package/dist/hooks/index.js

@@ -0,0 +1,3 @@
+export * from "./use-color-scheme.js";
+export * from "./use-theme-color.js";
+export * from "./use-theme-store.js";

package/dist/hooks/use-color-scheme.d.ts

@@ -0,0 +1,5 @@
+export declare const useColorScheme: () => {
+    colorScheme: import("..").ColorScheme;
+    isDark: boolean;
+    isLight: boolean;
+};

package/dist/hooks/use-color-scheme.js

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import { useThemeStore } from "./use-theme-store.js";
+const useColorScheme = ()=>{
+    const { colorScheme } = useThemeStore((state)=>state.theme);
+    const scheme = useMemo(()=>({
+            colorScheme,
+            isDark: 'dark' === colorScheme,
+            isLight: 'light' === colorScheme
+        }), [
+        colorScheme
+    ]);
+    return scheme;
+};
+export { useColorScheme };

package/dist/hooks/use-theme-color.d.ts

@@ -0,0 +1 @@
+export declare const useThemeColor: () => Record<import("..").ThemeColorVariable, string>;

package/dist/hooks/use-theme-color.js

@@ -0,0 +1,6 @@
+import { useThemeStore } from "./use-theme-store.js";
+const useThemeColor = ()=>{
+    const { colorVariables } = useThemeStore((state)=>state.theme);
+    return colorVariables;
+};
+export { useThemeColor };

package/dist/hooks/use-theme-store.d.ts

@@ -0,0 +1,46 @@
+import type { ThemeItemType } from '../theme-data';
+export type FontLoadStatus = 'idle' | 'loading' | 'success' | 'error';
+interface State {
+    /**
+     * 保存的主题
+     */
+    theme: ThemeItemType;
+    /**
+     * 保存的自定义主题配置（当切换到其他主题时保存，切回 custom 时恢复）
+     */
+    customTheme: ThemeItemType;
+    /**
+     * 保存的字体链接
+     */
+    fontUrl: string;
+    /**
+     * 应用的字体名称
+     */
+    fontName: string;
+    /**
+     * 字体加载状态
+     */
+    fontLoadStatus: FontLoadStatus;
+}
+interface Actions {
+    setTheme: (theme: ThemeItemType) => void;
+    setCustomTheme: (customTheme: ThemeItemType) => void;
+    setFontUrl: (fontUrl: string) => void;
+    setFontLoadStatus: (status: FontLoadStatus) => void;
+    setFontName: (name: 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/hooks/use-theme-store.js

@@ -0,0 +1,36 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { CustomTheme, UXDarkTheme } from "../theme-data.js";
+const useThemeStore = create()(persist((set)=>({
+        theme: UXDarkTheme,
+        customTheme: CustomTheme,
+        fontUrl: '',
+        fontName: '',
+        fontLoadStatus: 'idle',
+        setTheme: (theme)=>set({
+                theme
+            }),
+        setCustomTheme: (customTheme)=>set({
+                customTheme
+            }),
+        setFontUrl: (fontUrl)=>set({
+                fontUrl
+            }),
+        setFontLoadStatus: (fontLoadStatus)=>set({
+                fontLoadStatus
+            }),
+        setFontName: (fontName)=>set({
+                fontName
+            })
+    }), {
+    name: 'ux-preference-theme',
+    version: 2,
+    storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {}),
+    partialize: (state)=>({
+            theme: state.theme,
+            customTheme: state.customTheme,
+            fontName: state.fontName,
+            fontUrl: state.fontUrl
+        })
+}));
+export { useThemeStore };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './color';
+export * from './hooks';
 export * from './radius';
 export * from './size';
 export * from './spacing';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from "./color.js";
+export * from "./hooks/index.js";
 export * from "./radius.js";
 export * from "./size.js";
 export * from "./spacing.js";

package/dist/theme-data.js

@@ -343,7 +343,8 @@ const CustomTheme = {
     ...UXDarkTheme,
     id: 'custom',
     zhName: '自定义',
-    enName: 'Custom'
+    enName: 'Custom',
+    baseThemeId: UXDarkTheme.id
 };
 const themeData = [
     UXDarkTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-shared",
-  "version": "0.4.1-beta.4",
+  "version": "0.4.1-beta.6",
   "type": "module",
   "main": "./dist/index.js",
   "react-native": "./dist/index.js",
@@ -44,8 +44,8 @@
     "@rsbuild/plugin-react": "^1.3.5",
     "@rslib/core": "^0.12.3",
     "@types/react": "^19.1.10",
-    "@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"
   },
   "scripts": {
     "build": "rslib build",