@particle-network/ui-shared 0.4.1-beta.5 → 0.4.1-beta.7

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,6 +1,8 @@
 export * from './color';
+export * from './hooks';
 export * from './radius';
 export * from './size';
 export * from './spacing';
 export * from './tailwind-color';
 export * from './theme-data';
+export * from './utils';

package/dist/index.js

@@ -1,6 +1,8 @@
 export * from "./color.js";
+export * from "./hooks/index.js";
 export * from "./radius.js";
 export * from "./size.js";
 export * from "./spacing.js";
 export * from "./tailwind-color.js";
 export * from "./theme-data.js";
+export * from "./utils.js";

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function objectEntries<T extends object>(obj: T): [keyof T & string, T[keyof T & string]][];
+export declare function objectKeys<T extends object>(obj: T): (keyof T & string)[];
+export declare function objectValues<T extends object>(obj: T): T[keyof T & string][];
+export declare function objectFromEntries<T extends object>(entries: [keyof T & string, T[keyof T & string]][]): T;

package/dist/utils.js

@@ -0,0 +1,13 @@
+function objectEntries(obj) {
+    return Object.entries(obj);
+}
+function objectKeys(obj) {
+    return Object.keys(obj);
+}
+function objectValues(obj) {
+    return Object.values(obj);
+}
+function objectFromEntries(entries) {
+    return Object.fromEntries(entries);
+}
+export { objectEntries, objectFromEntries, objectKeys, objectValues };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-shared",
-  "version": "0.4.1-beta.5",
+  "version": "0.4.1-beta.7",
   "type": "module",
   "main": "./dist/index.js",
   "react-native": "./dist/index.js",