fix(react-19): ensure React 19 compatibility

Author: morewings

src/env/App/__snapshots__/App.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`env > App renders  1`] = `
 <DocumentFragment>
@@ -11,7 +11,7 @@ exports[`env > App renders  1`] = `
     </button>
   </div>
   <div
-    id=":r0:"
+    id="_r_0_"
     style="--boxColor:violet;--borderColor:purple;"
   >
     <div>

src/lib/LocalTheme/LocalRoot.tsx

@@ -1,5 +1,5 @@
-import type {HTMLAttributes, ReactNode} from 'react';
-import {createElement, forwardRef, useEffect, useMemo} from 'react';
+import type {HTMLAttributes, ReactNode, ElementType} from 'react';
+import {forwardRef, useEffect, useMemo} from 'react';
 
 import {createStyleObject} from '@/lib/utils';
 import type {DataAttributes, LibraryProps} from '@/lib/NativeProps';
@@ -12,26 +12,36 @@ export type LocalRootProps = DataAttributes &
     LibraryProps &
     HTMLAttributes<HTMLElement> & {
         children?: ReactNode;
-        /** Choose which HTMLElement to render as a root. div is default. */
-        as?: string;
-        /** Apply initial theme. */
+        /** Choose which HTMLElement to render as a root. `div` is the default value. */
+        as?: ElementType;
+        /** Apply the initial theme. */
         theme?: Theme;
-        /** Provide theme setter function. */
+        /** Provide a theme setter function. */
         setTheme?: (arg0: Theme) => 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 {
+        children,
+        as: Component = 'div',
+        theme = {},
+        setTheme = () => {},
+        ...restProps
+    } = props;
 
     const initialStyle = useMemo(() => createStyleObject(theme), [theme]);
 
     useEffect(() => {
         setTheme(theme);
     }, [theme, setTheme]);
 
-    return createElement(as, {...restProps, style: initialStyle, ref}, children);
+    return (
+        <Component ref={ref} style={initialStyle} {...restProps}>
+            {children}
+        </Component>
+    );
 });
 
 LocalRoot.displayName = 'LocalRoot';

src/lib/LocalTheme/__snapshots__/LocalRoot.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`lib > LocalRoot LocalRoot - Native API accepts ref as a Mutable Object 1`] = `<div />`;
 

src/lib/LocalTheme/useLocalTheme.tsx

@@ -8,8 +8,8 @@ import {LocalRoot} from './LocalRoot';
 
 /**
  * @public
- * React hook to apply multiple CSS variables to generated local root element (LocalRoot) and manipulate them.
- * Theme type is inferred from provided theme parameter.
+ * React hook to apply multiple CSS variables to a generated local root element (LocalRoot) and manipulate them.
+ * Theme type is inferred from the provided theme parameter.
  * @example
  * const {setTheme, getTheme, LocalRoot, getVariable, setVariable} = useLocalTheme();
  * const setThemeIvory = () => {
@@ -20,7 +20,7 @@ import {LocalRoot} from './LocalRoot';
  * return <LocalRoot theme={{foo: 'bar'}} className="demo-local">//...
  */
 export const useLocalTheme = <TElement extends HTMLElement>() => {
-    const themeRef = useRef<Theme>();
+    const themeRef = useRef<Theme>({});
     const elementRef = useRef<TElement>(null);
 
     const setTheme = useCallback((nextTheme: Theme) => {
@@ -55,13 +55,13 @@ export const useLocalTheme = <TElement extends HTMLElement>() => {
     return {
         /** Effect to apply new theme to LocalRoot */
         setTheme,
-        /** Get current theme set for LocalRoot */
+        /** Get the current theme set for LocalRoot */
         getTheme,
-        /** Wrapper component which creates DOM node to store theme data */
+        /** Wrapper component which creates a DOM node to store theme data */
         LocalRoot: MemoRoot,
         /** React Mutable Ref object attached to LocalRoot */
         ref: elementRef,
-        /** Get variable value within LocalRoot theme */
+        /** Get variable value within the LocalRoot theme */
         getVariable,
         /** Effect to set new variable value within LocalRoot theme */
         setVariable,

src/lib/RootTheme/useRootTheme.ts

@@ -57,6 +57,7 @@ export const useRootTheme = <TTheme extends Theme>(
         [id]
     );
 
+    // eslint-disable-next-line react-hooks/refs
     const style = useMemo(() => createStyleObject(themeRef.current), []);
 
     return {