Add a splitRender util

examples/expo-example/src/common.tsx

@@ -4,20 +4,23 @@
 //
 
 import { px, useYoshiki } from "yoshiki";
-import { P } from "./components/text";
+import { P } from "./components/text/text";
+import { Div } from "./components/div";
 
 export const Card = () => {
 	const { css } = useYoshiki();
 
 	return (
-		<P
-			{...css({
-				backgroundColor: "black",
-				p: px(12),
-				/* color: "white", */
-			})}
-		>
-			Test
-		</P>
+		<Div {...css({ backgroundColor: { xs: "green", md: "blue" } })}>
+			<P
+				{...css({
+					backgroundColor: "black",
+					m: px(12),
+					color: "white",
+				})}
+			>
+				Test
+			</P>
+		</Div>
 	);
 };

examples/expo-example/src/components/div.tsx

@@ -0,0 +1,19 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { splitRender } from "yoshiki";
+import { View } from "react-native";
+import { ReactNode } from "react";
+
+export const Div = splitRender<HTMLDivElement, View, { children: ReactNode }>(
+	function _DivWeb(props, ref) {
+		console.log(props);
+		return <div ref={ref} {...props}></div>;
+	},
+	function _DivNat(props, ref) {
+		console.log(props)
+		return <View ref={ref} {...props}></View>;
+	},
+);