chore(docs): updated example of usage

Author: coderdiaz

packages/app-typescript/App.tsx

@@ -1,28 +1,27 @@
+import { View } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, View } from 'react-native';
+import { styled } from './jacaranda.config';
 import { Typography } from './components/Typography';
 import { Button } from './components/Button';
 
+const StyledView = styled(View)({
+  flex: 1,
+  backgroundColor: '$colors.white',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '$space.3',
+});
+
 export default function App() {
   return (
-    <View style={sty.container}>
+    <StyledView>
       <StatusBar style="auto" />
       <Button color="secondary">
         <Typography color="white">Hello</Typography>
       </Button>
       <Button color="primary">
         <Typography color="black">Hello</Typography>
       </Button>
-    </View>
+    </StyledView>
   );
 }
-
-const sty = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 12,
-  },
-});

packages/app-typescript/components/Button.tsx

@@ -1,7 +1,7 @@
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { type VariantProps } from 'jacaranda';
 import { Typography } from './Typography';
-import { sva } from '../jacaranda.config';
+import { sva, styled } from '../jacaranda.config';
 
 type ButtonProps = VariantProps<typeof buttonStyles> & {
   children?: React.ReactNode;

packages/app-typescript/jacaranda.config.ts

@@ -1,6 +1,6 @@
 import { defineTokens } from 'jacaranda';
 
-export const { sva, tokens } = defineTokens({
+export const { sva, tokens, styled } = defineTokens({
   colors: {
     white: '#ffffff',
     black: '#000000',

packages/app/App.js

@@ -1,5 +1,5 @@
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { sva } from './jacaranda.config';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { sva, styled } from './jacaranda.config';
 
 export const Button = (props) => {
   return (
@@ -33,19 +33,18 @@ const buttonStyles = sva({
   },
 });
 
+const StyledView = styled(View)({
+  flex: 1,
+  backgroundColor: '$colors.white',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '$space.3',
+});
+
 export default function App() {
   return (
-    <View style={sty.container}>
+    <StyledView>
       <Button intent="primary" />
-    </View>
+    </StyledView>
   );
 }
-
-const sty = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});