fix(theme): improve theme type

src/lib/LocalTheme/LocalRoot.tsx

@@ -1,9 +1,9 @@
 import type {HTMLAttributes, ReactNode} from 'react';
 import {createElement, forwardRef, useEffect, useMemo} from 'react';
+import type {ThemeType} from 'css-vars-hook';
 
 import {createStyleObject} from '../utils';
 import type {DataAttributes, LibraryProps} from '../NativeProps';
-import type {UnitType} from '../UnitType';
 
 /**
  * @public
@@ -15,20 +15,17 @@ export type LocalRootProps = DataAttributes &
         /** Choose which HTMLElement to render as a root. div is default. */
         as?: string;
         /** Apply initial theme. */
-        theme?: Record<string, UnitType>;
+        theme?: ThemeType;
         /** Provide theme setter function. */
-        setTheme?: (arg0: Record<string, UnitType>) => void;
+        setTheme?: (arg0: ThemeType) => void;
     };
 
 export const LocalRoot = forwardRef<HTMLElement, LocalRootProps>((props, ref) => {
     // This is needed to fix an error introduced in version 0.6.14.
     // Props were not transported to returned HTMLElement.
     const {children, as = 'div', theme = {}, setTheme = () => {}, ...restProps} = props;
 
-    // const initialStyle = useRef(createStyleObject(theme));
-
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
-    const initialStyle = useMemo(() => createStyleObject(theme), []);
+    const initialStyle = useMemo(() => createStyleObject(theme), [theme]);
 
     useEffect(() => {
         setTheme(theme);

src/lib/LocalTheme/useLocalTheme.tsx

@@ -1,4 +1,5 @@
 import {useCallback, useRef, useMemo} from 'react';
+import type {ThemeType} from 'css-vars-hook';
 
 import {setCSSVariable} from '../utils';
 import type {LocalRootProps} from './LocalRoot';
@@ -19,10 +20,10 @@ import type {UnitType} from '../UnitType';
  * return <LocalRoot theme={{foo: 'bar'}} className="demo-local">//...
  */
 export const useLocalTheme = <TElement extends HTMLElement>() => {
-    const themeRef = useRef<Record<string, UnitType>>();
+    const themeRef = useRef<ThemeType>();
     const elementRef = useRef<TElement>(null);
 
-    const setTheme = useCallback((nextTheme: Record<string, UnitType>) => {
+    const setTheme = useCallback((nextTheme: ThemeType) => {
         Object.keys(nextTheme).forEach((key: string) => {
             setCSSVariable(elementRef.current!)(key, nextTheme[key]);
         });

src/lib/utils.ts

@@ -1,4 +1,5 @@
 import type {MutableRefObject, CSSProperties} from 'react';
+import type {ThemeType} from 'css-vars-hook';
 
 import {ROOT_ID} from './config';
 import type {UnitType} from './UnitType';
@@ -43,9 +44,9 @@ export const getCSSVariable =
  * @name createStyleObject
  * @description Add `--` prefix to property names in theme object in order to make it applicable to DOM node
  */
-export const createStyleObject = (theme: Record<string, UnitType>): CSSProperties => {
+export const createStyleObject = (theme: ThemeType): CSSProperties => {
     const keys = Object.keys(theme);
-    const result = {} as Record<string, UnitType>;
+    const result = {} as ThemeType;
     keys.forEach(key => {
         result[`--${key}`] = theme[key];
     });

src/types.d.ts

@@ -4,8 +4,9 @@ declare module '*.module.css' {
 }
 
 declare module 'css-vars-hook' {
+    import type {UnitType} from '@/lib';
     /** The most common theme type */
-    export type ThemeType = Record<string, string | number>;
+    export type ThemeType = Record<string, UnitType>;
 }
 
 declare module '*.png';