@json-render/react-native 0.5.1 → 0.6.0

package/README.md

@@ -141,6 +141,10 @@ function App({ spec }) {
 | `ListItem` | List row with title, subtitle, accessory |
 | `Modal` | Bottom sheet modal |
 
+## Visibility Conditions
+
+Elements can use `visible` to show/hide based on state. Same syntax as [@json-render/react](../react/README.md#visibility-conditions): `{ "$state": "/path" }`, `{ "$state": "/path", "eq": value }`, `{ "$state": "/path", "not": true }`, or `[ cond1, cond2 ]` for AND.
+
 ## Pressable Component
 
 The `Pressable` component wraps children and triggers an action on press. It's essential for building interactive UIs like tab bars:
@@ -150,7 +154,7 @@ The `Pressable` component wraps children and triggers an action on press. It's e
   "type": "Pressable",
   "props": {
     "action": "setState",
-    "actionParams": { "path": "/activeTab", "value": "home" }
+    "actionParams": { "statePath": "/activeTab", "value": "home" }
   },
   "children": ["home-tab-icon", "home-tab-label"]
 }
@@ -163,7 +167,7 @@ The `setState` action is handled automatically by `ActionProvider`. It updates t
 ```json
 {
   "action": "setState",
-  "actionParams": { "path": "/activeTab", "value": "home" }
+  "actionParams": { "statePath": "/activeTab", "value": "home" }
 }
 ```
 
@@ -176,12 +180,12 @@ Any prop value can be a dynamic expression resolved at render time:
   "type": "Icon",
   "props": {
     "name": {
-      "$cond": { "eq": [{ "path": "/activeTab" }, "home"] },
+      "$cond": { "$state": "/activeTab", "eq": "home" },
       "$then": "home",
       "$else": "home-outline"
     },
     "color": {
-      "$cond": { "eq": [{ "path": "/activeTab" }, "home"] },
+      "$cond": { "$state": "/activeTab", "eq": "home" },
       "$then": "#007AFF",
       "$else": "#8E8E93"
     }
@@ -195,9 +199,9 @@ See [@json-render/core](../core/README.md) for full expression syntax.
 
 Combine `Pressable`, `setState`, visibility conditions, and dynamic props for functional tabs:
 
-1. Each tab button is a `Pressable` with `action: "setState"` and `actionParams: { path: "/activeTab", value: "tabName" }`
+1. Each tab button is a `Pressable` with `action: "setState"` and `actionParams: { statePath: "/activeTab", value: "tabName" }`
 2. Tab icons/labels use `$cond` dynamic props for active/inactive styling
-3. Tab content sections use `visible` conditions: `{ "eq": [{ "path": "/activeTab" }, "tabName"] }`
+3. Tab content sections use `visible` conditions: `{ "$state": "/activeTab", "eq": "tabName" }`
 
 ## AI Prompt Generation
 
@@ -214,8 +218,8 @@ const systemPrompt = catalog.prompt({
 
 | Hook | Purpose |
 |------|---------|
-| `useStateStore()` | Access data context (`data`, `get`, `set`) |
-| `useStateValue(path)` | Get single value from data |
+| `useStateStore()` | Access state context (`state`, `get`, `set`, `update`) |
+| `useStateValue(path)` | Get single value from state |
 | `useStateBinding(path)` | Two-way data binding (returns `[value, setValue]`) |
 | `useVisibility()` | Access visibility evaluation |
 | `useIsVisible(condition)` | Check if condition is met |

package/dist/catalog.d.mts

@@ -19,6 +19,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: string[];
         description: string;
+        example: {
+            padding: number;
+            backgroundColor: string;
+        };
     };
     Row: {
         props: z.ZodObject<{
@@ -47,6 +51,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: string[];
         description: string;
+        example: {
+            gap: number;
+            alignItems: string;
+        };
     };
     Column: {
         props: z.ZodObject<{
@@ -71,6 +79,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: string[];
         description: string;
+        example: {
+            gap: number;
+            padding: number;
+        };
     };
     ScrollContainer: {
         props: z.ZodObject<{
@@ -134,6 +146,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: never[];
         description: string;
+        example: {
+            text: string;
+            level: string;
+        };
     };
     Paragraph: {
         props: z.ZodObject<{
@@ -149,6 +165,9 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: never[];
         description: string;
+        example: {
+            text: string;
+        };
     };
     Label: {
         props: z.ZodObject<{
@@ -163,6 +182,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: never[];
         description: string;
+        example: {
+            text: string;
+            size: string;
+        };
     };
     Image: {
         props: z.ZodObject<{
@@ -180,6 +203,12 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: never[];
         description: string;
+        example: {
+            src: string;
+            alt: string;
+            width: number;
+            height: number;
+        };
     };
     Avatar: {
         props: z.ZodObject<{
@@ -195,6 +224,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: never[];
         description: string;
+        example: {
+            initials: string;
+            size: string;
+        };
     };
     Badge: {
         props: z.ZodObject<{
@@ -209,6 +242,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: never[];
         description: string;
+        example: {
+            label: string;
+            variant: string;
+        };
     };
     Chip: {
         props: z.ZodObject<{
@@ -241,12 +278,15 @@ declare const standardComponentDefinitions: {
         events: string[];
         slots: never[];
         description: string;
+        example: {
+            label: string;
+            variant: string;
+        };
     };
     TextInput: {
         props: z.ZodObject<{
             placeholder: z.ZodNullable<z.ZodString>;
             value: z.ZodNullable<z.ZodString>;
-            statePath: z.ZodNullable<z.ZodString>;
             secureTextEntry: z.ZodNullable<z.ZodBoolean>;
             keyboardType: z.ZodNullable<z.ZodEnum<{
                 default: "default";
@@ -263,11 +303,14 @@ declare const standardComponentDefinitions: {
         events: string[];
         slots: never[];
         description: string;
+        example: {
+            placeholder: string;
+            label: string;
+        };
     };
     Switch: {
         props: z.ZodObject<{
-            value: z.ZodNullable<z.ZodBoolean>;
-            statePath: z.ZodNullable<z.ZodString>;
+            checked: z.ZodNullable<z.ZodBoolean>;
             label: z.ZodNullable<z.ZodString>;
             disabled: z.ZodNullable<z.ZodBoolean>;
         }, z.core.$strip>;
@@ -278,7 +321,6 @@ declare const standardComponentDefinitions: {
     Checkbox: {
         props: z.ZodObject<{
             checked: z.ZodNullable<z.ZodBoolean>;
-            statePath: z.ZodNullable<z.ZodString>;
             label: z.ZodNullable<z.ZodString>;
             disabled: z.ZodNullable<z.ZodBoolean>;
         }, z.core.$strip>;
@@ -292,7 +334,6 @@ declare const standardComponentDefinitions: {
             max: z.ZodNullable<z.ZodNumber>;
             step: z.ZodNullable<z.ZodNumber>;
             value: z.ZodNullable<z.ZodNumber>;
-            statePath: z.ZodNullable<z.ZodString>;
             label: z.ZodNullable<z.ZodString>;
             color: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>;
@@ -303,7 +344,6 @@ declare const standardComponentDefinitions: {
         props: z.ZodObject<{
             placeholder: z.ZodNullable<z.ZodString>;
             value: z.ZodNullable<z.ZodString>;
-            statePath: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>;
         events: string[];
         slots: never[];
@@ -341,6 +381,11 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: string[];
         description: string;
+        example: {
+            title: string;
+            padding: number;
+            elevated: boolean;
+        };
     };
     ListItem: {
         props: z.ZodObject<{
@@ -353,6 +398,11 @@ declare const standardComponentDefinitions: {
         events: string[];
         slots: never[];
         description: string;
+        example: {
+            title: string;
+            subtitle: string;
+            showChevron: boolean;
+        };
     };
     Modal: {
         props: z.ZodObject<{
@@ -363,7 +413,6 @@ declare const standardComponentDefinitions: {
                 fade: "fade";
                 none: "none";
             }>>;
-            statePath: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>;
         slots: string[];
         description: string;
@@ -419,22 +468,22 @@ declare const standardActionDefinitions: {
     };
     setState: {
         params: z.ZodObject<{
-            path: z.ZodString;
+            statePath: z.ZodString;
             value: z.ZodUnknown;
         }, z.core.$strip>;
         description: string;
     };
     pushState: {
         params: z.ZodObject<{
-            path: z.ZodString;
+            statePath: z.ZodString;
             value: z.ZodUnknown;
-            clearPath: z.ZodOptional<z.ZodString>;
+            clearStatePath: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>;
         description: string;
     };
     removeState: {
         params: z.ZodObject<{
-            path: z.ZodString;
+            statePath: z.ZodString;
             index: z.ZodNumber;
         }, z.core.$strip>;
         description: string;

package/dist/catalog.d.ts

@@ -19,6 +19,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: string[];
         description: string;
+        example: {
+            padding: number;
+            backgroundColor: string;
+        };
     };
     Row: {
         props: z.ZodObject<{
@@ -47,6 +51,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: string[];
         description: string;
+        example: {
+            gap: number;
+            alignItems: string;
+        };
     };
     Column: {
         props: z.ZodObject<{
@@ -71,6 +79,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: string[];
         description: string;
+        example: {
+            gap: number;
+            padding: number;
+        };
     };
     ScrollContainer: {
         props: z.ZodObject<{
@@ -134,6 +146,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: never[];
         description: string;
+        example: {
+            text: string;
+            level: string;
+        };
     };
     Paragraph: {
         props: z.ZodObject<{
@@ -149,6 +165,9 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: never[];
         description: string;
+        example: {
+            text: string;
+        };
     };
     Label: {
         props: z.ZodObject<{
@@ -163,6 +182,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: never[];
         description: string;
+        example: {
+            text: string;
+            size: string;
+        };
     };
     Image: {
         props: z.ZodObject<{
@@ -180,6 +203,12 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: never[];
         description: string;
+        example: {
+            src: string;
+            alt: string;
+            width: number;
+            height: number;
+        };
     };
     Avatar: {
         props: z.ZodObject<{
@@ -195,6 +224,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: never[];
         description: string;
+        example: {
+            initials: string;
+            size: string;
+        };
     };
     Badge: {
         props: z.ZodObject<{
@@ -209,6 +242,10 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: never[];
         description: string;
+        example: {
+            label: string;
+            variant: string;
+        };
     };
     Chip: {
         props: z.ZodObject<{
@@ -241,12 +278,15 @@ declare const standardComponentDefinitions: {
         events: string[];
         slots: never[];
         description: string;
+        example: {
+            label: string;
+            variant: string;
+        };
     };
     TextInput: {
         props: z.ZodObject<{
             placeholder: z.ZodNullable<z.ZodString>;
             value: z.ZodNullable<z.ZodString>;
-            statePath: z.ZodNullable<z.ZodString>;
             secureTextEntry: z.ZodNullable<z.ZodBoolean>;
             keyboardType: z.ZodNullable<z.ZodEnum<{
                 default: "default";
@@ -263,11 +303,14 @@ declare const standardComponentDefinitions: {
         events: string[];
         slots: never[];
         description: string;
+        example: {
+            placeholder: string;
+            label: string;
+        };
     };
     Switch: {
         props: z.ZodObject<{
-            value: z.ZodNullable<z.ZodBoolean>;
-            statePath: z.ZodNullable<z.ZodString>;
+            checked: z.ZodNullable<z.ZodBoolean>;
             label: z.ZodNullable<z.ZodString>;
             disabled: z.ZodNullable<z.ZodBoolean>;
         }, z.core.$strip>;
@@ -278,7 +321,6 @@ declare const standardComponentDefinitions: {
     Checkbox: {
         props: z.ZodObject<{
             checked: z.ZodNullable<z.ZodBoolean>;
-            statePath: z.ZodNullable<z.ZodString>;
             label: z.ZodNullable<z.ZodString>;
             disabled: z.ZodNullable<z.ZodBoolean>;
         }, z.core.$strip>;
@@ -292,7 +334,6 @@ declare const standardComponentDefinitions: {
             max: z.ZodNullable<z.ZodNumber>;
             step: z.ZodNullable<z.ZodNumber>;
             value: z.ZodNullable<z.ZodNumber>;
-            statePath: z.ZodNullable<z.ZodString>;
             label: z.ZodNullable<z.ZodString>;
             color: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>;
@@ -303,7 +344,6 @@ declare const standardComponentDefinitions: {
         props: z.ZodObject<{
             placeholder: z.ZodNullable<z.ZodString>;
             value: z.ZodNullable<z.ZodString>;
-            statePath: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>;
         events: string[];
         slots: never[];
@@ -341,6 +381,11 @@ declare const standardComponentDefinitions: {
         }, z.core.$strip>;
         slots: string[];
         description: string;
+        example: {
+            title: string;
+            padding: number;
+            elevated: boolean;
+        };
     };
     ListItem: {
         props: z.ZodObject<{
@@ -353,6 +398,11 @@ declare const standardComponentDefinitions: {
         events: string[];
         slots: never[];
         description: string;
+        example: {
+            title: string;
+            subtitle: string;
+            showChevron: boolean;
+        };
     };
     Modal: {
         props: z.ZodObject<{
@@ -363,7 +413,6 @@ declare const standardComponentDefinitions: {
                 fade: "fade";
                 none: "none";
             }>>;
-            statePath: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>;
         slots: string[];
         description: string;
@@ -419,22 +468,22 @@ declare const standardActionDefinitions: {
     };
     setState: {
         params: z.ZodObject<{
-            path: z.ZodString;
+            statePath: z.ZodString;
             value: z.ZodUnknown;
         }, z.core.$strip>;
         description: string;
     };
     pushState: {
         params: z.ZodObject<{
-            path: z.ZodString;
+            statePath: z.ZodString;
             value: z.ZodUnknown;
-            clearPath: z.ZodOptional<z.ZodString>;
+            clearStatePath: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>;
         description: string;
     };
     removeState: {
         params: z.ZodObject<{
-            path: z.ZodString;
+            statePath: z.ZodString;
             index: z.ZodNumber;
         }, z.core.$strip>;
         description: string;