feat: provide platform default property handling

.changeset/tricky-apricots-allow.md

@@ -0,0 +1,5 @@
+---
+"@svbstrate/react-native": patch
+---
+
+Remap default properties for platform support i.e. width can be a `number` or `${string}pt`

packages/react-native/lib/index.tsx

@@ -5,6 +5,57 @@ import * as Polymorphic from "@radix-ui/react-polymorphic";
 
 export * as presets from "@svbstrate/core/presets";
 
+const defaultProperties: svbstrate.ThemeConfig["properties"] = {
+  width: {
+    token: "width",
+  },
+  height: {
+    token: "width",
+  },
+  top: {
+    token: "space",
+  },
+  bottom: {
+    token: "space",
+  },
+  left: {
+    token: "space",
+  },
+  right: {
+    token: "space",
+  },
+  margin: {
+    token: "space",
+  },
+  marginTop: {
+    token: "space",
+  },
+  marginBottom: {
+    token: "space",
+  },
+  marginLeft: {
+    token: "space",
+  },
+  marginRight: {
+    token: "space",
+  },
+  padding: {
+    token: "space",
+  },
+  paddingTop: {
+    token: "space",
+  },
+  paddingBottom: {
+    token: "space",
+  },
+  paddingLeft: {
+    token: "space",
+  },
+  paddingRight: {
+    token: "space",
+  },
+};
+
 export type Theme = Partial<svbstrate.ThemeConfig>;
 
 export type BoxPropsBase = {
@@ -24,7 +75,9 @@ export type SvbstrateContext = {
 type PolymorphicBox = Polymorphic.ForwardRefComponent<typeof View, BoxProps>;
 
 const context = React.createContext<SvbstrateContext>({
-  theme: svbstrate.createTheme({}),
+  theme: svbstrate.createTheme({
+    properties: defaultProperties,
+  }),
 });
 
 export function useSvbstrate(): SvbstrateContext {
@@ -40,7 +93,15 @@ export function ThemeProvider(
   props: React.PropsWithChildren<{ theme: Partial<svbstrate.ThemeConfig> }>
 ): React.FunctionComponentElement<React.ProviderProps<SvbstrateContext>> {
   return React.createElement(context.Provider, {
-    value: { theme: svbstrate.createTheme(props.theme) },
+    value: {
+      theme: svbstrate.createTheme({
+        ...props.theme,
+        properties: {
+          ...defaultProperties,
+          ...(props.theme.properties || {}),
+        },
+      }),
+    },
     children: props.children,
   });
 }