fix: enhance UnwrapRecursiveArray to support maximum depth limit (#195)

* fix: enhance UnwrapRecursiveArray to support maximum depth limit

* chore: use ComponentPropsWithRef in styled utility

* Apply suggestions from code review

---------

Co-authored-by: Mark Lawlor <[email protected]>

Author: salemkode

src/utilities/dot-notation.types.ts

@@ -29,9 +29,16 @@ export type StyleProp<T> =
 // ---------- Type Helpers ----------
 
 // Unwrap nested arrays (from RecursiveArray)
-type UnwrapRecursiveArray<T> = T extends (infer I)[]
-  ? UnwrapRecursiveArray<I>
-  : T;
+type UnwrapRecursiveArray<
+  T,
+  Depth extends unknown[] = [],
+  MaxDepth extends number = 10
+> = Depth["length"] extends MaxDepth
+  ? T
+  : T extends (infer I)[]
+    ? UnwrapRecursiveArray<I, [...Depth, unknown], MaxDepth>
+    : T;
+
 
 // Remove null, false, undefined, etc.
 type RemoveFalsy<T> = Exclude<T, Falsy>;

src/web/api.tsx

@@ -1,7 +1,7 @@
 import {
   createElement,
   useMemo,
-  type ComponentProps,
+  type ComponentPropsWithRef,
   type PropsWithChildren,
 } from "react";
 import { Appearance } from "react-native";
@@ -25,7 +25,7 @@ export const styled = <
   mapping: M,
   _options?: StyledOptions,
 ) => {
-  return (props: StyledProps<ComponentProps<C>, M>) => {
+  return (props: StyledProps<ComponentPropsWithRef<C>, M>) => {
     return useCssElement(baseComponent, mapping, props);
   };
 };