docs: update all examples to use RN components instead of web-only div, span, button etc.

Author: cray0000

docs/api/babel.md

@@ -78,16 +78,18 @@ The Babel preset transforms:
 ### Before Transform
 
 ```jsx
+import { View, Text } from 'react-native'
+
 function Button({ children }) {
   return (
-    <button styleName="button">
-      <span part="icon">★</span>
-      {children}
-    </button>
+    <View styleName="root">
+      <Text part="icon" styleName="icon">★</Text>
+      <Text styleName="text">{children}</Text>
+    </View>
   )
 
   styl`
-    .button
+    .root
       padding 12px 24px
       background blue
   `
@@ -107,6 +109,7 @@ CSSX works with TypeScript. The `styl` and `pug` template literals are removed a
 
 ```tsx
 import { styl } from 'cssxjs'
+import { View, Text } from 'react-native'
 
 interface CardProps {
   title: string
@@ -115,10 +118,10 @@ interface CardProps {
 
 function Card({ title, children }: CardProps) {
   return (
-    <div styleName="card">
-      <h2 styleName="title">{title}</h2>
+    <View styleName="card">
+      <Text styleName="title">{title}</Text>
       {children}
-    </div>
+    </View>
   )
 
   styl`

docs/api/css.md

@@ -6,17 +6,24 @@ The `css` template literal lets you write styles using plain CSS syntax.
 
 ```jsx
 import { css } from 'cssxjs'
+import { Pressable, Text } from 'react-native'
 
 function Button({ children }) {
-  return <button styleName="button">{children}</button>
+  return (
+    <Pressable styleName="button">
+      <Text styleName="text">{children}</Text>
+    </Pressable>
+  )
 
   css`
     .button {
       padding: 12px 24px;
       background: #007bff;
-      color: white;
       border-radius: 8px;
     }
+    .text {
+      color: white;
+    }
   `
 }
 ```
@@ -34,6 +41,8 @@ Use `css` instead of `styl` when you:
 Works the same as `styl` — inside a function for component-scoped styles, or at module level for shared styles:
 
 ```jsx
+import { View } from 'react-native'
+
 // Module-level (shared)
 css`
   .shared-button {
@@ -42,7 +51,7 @@ css`
 `
 
 function Card() {
-  return <div styleName="card">...</div>
+  return <View styleName="card">...</View>
 
   // Function-level (scoped)
   css`

docs/api/jsx-props.md

@@ -7,42 +7,49 @@ CSSX extends JSX with custom props for styling.
 Apply class-based styles to an element. Works like `className` but with scoped, processed styles.
 
 ```jsx
-<div styleName="card featured">Content</div>
+<View styleName="card featured">
+  <Text>Content</Text>
+</View>
 ```
 
 **Syntax Options:**
 
 ```jsx
 // String — simple static class
-<div styleName="card" />
+<View styleName="card" />
 
 // Array with object — recommended for dynamic classes
-<div styleName={['card', variant, { active, disabled }]} />
+<View styleName={['card', variant, { active, disabled }]} />
 ```
 
 ### Array Pattern (Recommended)
 
 Use arrays with an object at the end for modifiers:
 
 ```jsx
-function Card({ variant, highlighted, compact }) {
+import { View, Text } from 'react-native'
+
+function Card({ variant, highlighted, compact, children }) {
   return (
-    <div styleName={['card', variant, { highlighted, compact }]}>
-      Content
-    </div>
+    <View styleName={['card', variant, { highlighted, compact }]}>
+      <Text>{children}</Text>
+    </View>
   )
 
   styl`
     .card
       background white
-      border 1px solid #ddd
+      border-width 1px
+      border-color #ddd
       padding 16px
 
       &.featured
-        border 2px solid gold
+        border-width 2px
+        border-color gold
 
       &.highlighted
-        box-shadow 0 0 10px gold
+        shadow-color gold
+        shadow-radius 10px
 
       &.compact
         padding 8px
@@ -62,18 +69,19 @@ The pattern:
 For truly dynamic values, combine `styleName` with the `style` prop:
 
 ```jsx
+import { View, Text } from 'react-native'
+
 function ProgressBar({ progress }) {
   return (
-    <div styleName="bar" style={{ width: `${progress}%` }}>
-      {progress}%
-    </div>
+    <View styleName="bar" style={{ width: `${progress}%` }}>
+      <Text>{progress}%</Text>
+    </View>
   )
 
   styl`
     .bar
       height 20px
       background-color #4caf50
-      transition width 0.3s
   `
 }
 ```
@@ -85,12 +93,14 @@ function ProgressBar({ progress }) {
 Expose an element for external styling via `:part()`.
 
 ```jsx
+import { Pressable, Text } from 'react-native'
+
 function Button({ children }) {
   return (
-    <button part="root" styleName="root">
-      <span part="icon">★</span>
-      <span part="text">{children}</span>
-    </button>
+    <Pressable part="root" styleName="root">
+      <Text part="icon" styleName="icon">★</Text>
+      <Text part="text" styleName="text">{children}</Text>
+    </Pressable>
   )
 }
 ```