Add units functions

examples/expo-example/src/app.tsx

@@ -7,6 +7,7 @@ import { StatusBar } from "expo-status-bar";
 import { Text, View } from "react-native";
 import { registerRootComponent } from "expo";
 import { Pressable, Stylable, useYoshiki } from "yoshiki/native";
+import { Card } from "./common";
 
 const CustomBox = ({ color, ...props }: { color: string } & Stylable) => {
 	const { css } = useYoshiki();
@@ -60,6 +61,7 @@ function App() {
 			<CustomBox color="black" {...css({ borderColor: "red", borderWidth: 3 })} />
 			<BoxWithoutProps {...css({ borderColor: "red", borderWidth: 3 })} />
 			<StatusBar style="auto" />
+			<Card />
 		</View>
 	);
 }

examples/expo-example/src/common.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { px, useYoshiki } from "yoshiki";
+import { P } from "./components/text";
+
+export const Card = () => {
+	const { css } = useYoshiki();
+
+	return (
+		<P
+			{...css({
+				backgroundColor: "black",
+				p: px(12),
+				/* color: "white", */
+			})}
+		>
+			Test
+		</P>
+	);
+};

examples/expo-example/src/components/text.d.ts

@@ -0,0 +1,10 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { FunctionComponent, ReactNode } from "react";
+import { Stylable } from "yoshiki";
+
+export type PProps = Stylable<"text"> & { children: ReactNode | string};
+export declare const P: FunctionComponent<PProps>;

examples/expo-example/src/components/text.native.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { forwardRef } from "react";
+import { Text } from "react-native";
+import { YsNative } from "yoshiki";
+import { PProps } from "./text";
+
+export const P = forwardRef<Text, YsNative<PProps>>(function _P({ children, ...props }, ref) {
+	return (
+		<Text ref={ref} {...props}>
+			{children}
+		</Text>
+	);
+});

examples/expo-example/src/components/text.web.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 { forwardRef } from "react";
+import { YsWeb } from "yoshiki";
+import { PProps } from "./text";
+
+export const P = forwardRef<HTMLParagraphElement, YsWeb<PProps>>(function _P(
+	{ children, ...props },
+	ref,
+) {
+	return (
+		<p ref={ref} {...props}>
+			{children}
+		</p>
+	);
+});