@uipath/apollo-wind 0.9.0 → 0.10.0-pr257.2a4b17b

package/dist/components/forms/form-state-viewer.cjs

@@ -27,467 +27,1022 @@ __webpack_require__.d(__webpack_exports__, {
     FormStateViewer: ()=>FormStateViewer
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const compiler_runtime_namespaceObject = require("react/compiler-runtime");
 const external_react_namespaceObject = require("react");
 const badge_cjs_namespaceObject = require("../ui/badge.cjs");
 const card_cjs_namespaceObject = require("../ui/card.cjs");
 const tabs_cjs_namespaceObject = require("../ui/tabs.cjs");
 const scroll_area_cjs_namespaceObject = require("../ui/scroll-area.cjs");
 const external_lucide_react_namespaceObject = require("lucide-react");
-function FormStateViewer({ form, title = 'Form State', className = '', compact = false }) {
-    const [activeTab, setActiveTab] = (0, external_react_namespaceObject.useState)('values');
+function FormStateViewer(t0) {
+    const $ = (0, compiler_runtime_namespaceObject.c)(192);
+    const { form, title: t1, className: t2, compact: t3 } = t0;
+    const title = void 0 === t1 ? "Form State" : t1;
+    const className = void 0 === t2 ? "" : t2;
+    const compact = void 0 === t3 ? false : t3;
+    const [activeTab, setActiveTab] = (0, external_react_namespaceObject.useState)("values");
     const { formState, watch } = form;
-    const values = watch();
-    const stats = {
-        isValid: formState.isValid,
-        isDirty: formState.isDirty,
-        isSubmitting: formState.isSubmitting,
-        isValidating: formState.isValidating,
-        submitCount: formState.submitCount,
-        errorCount: Object.keys(formState.errors).length,
-        dirtyFieldsCount: Object.keys(formState.dirtyFields).length,
-        touchedFieldsCount: Object.keys(formState.touchedFields).length
-    };
-    if (compact) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.Card, {
-        className: `p-4 ${className}`,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            className: "space-y-3",
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                    className: "flex items-center justify-between",
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                            className: "text-sm font-semibold",
-                            children: title
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                            className: "flex gap-2",
-                            children: [
-                                stats.isValid ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
-                                    variant: "default",
-                                    className: "bg-green-600",
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CheckCircle2, {
-                                            className: "w-3 h-3 mr-1"
-                                        }),
-                                        "Valid"
-                                    ]
-                                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
-                                    variant: "destructive",
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.XCircle, {
-                                            className: "w-3 h-3 mr-1"
-                                        }),
-                                        "Invalid"
-                                    ]
-                                }),
-                                stats.isDirty && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
-                                    variant: "secondary",
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FileEdit, {
-                                            className: "w-3 h-3 mr-1"
-                                        }),
-                                        "Dirty"
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
-                    className: "text-xs bg-muted p-3 rounded overflow-auto max-h-40",
-                    children: JSON.stringify(values, null, 2)
-                })
-            ]
-        })
-    });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
-        className: `${className}`,
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: "p-4 border-b",
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                        className: "flex items-center justify-between mb-3",
+    let T0;
+    let T1;
+    let T2;
+    let T3;
+    let stats;
+    let t10;
+    let t11;
+    let t12;
+    let t13;
+    let t14;
+    let t15;
+    let t16;
+    let t17;
+    let t4;
+    let t5;
+    let t6;
+    let t7;
+    let t8;
+    let t9;
+    if ($[0] !== activeTab || $[1] !== className || $[2] !== compact || $[3] !== formState.dirtyFields || $[4] !== formState.errors || $[5] !== formState.isDirty || $[6] !== formState.isSubmitting || $[7] !== formState.isValid || $[8] !== formState.isValidating || $[9] !== formState.submitCount || $[10] !== formState.touchedFields || $[11] !== title || $[12] !== watch) {
+        t17 = Symbol.for("react.early_return_sentinel");
+        bb0: {
+            const values = watch();
+            const t18 = formState.isValid;
+            const t19 = formState.isDirty;
+            const t20 = formState.isSubmitting;
+            const t21 = formState.isValidating;
+            const t22 = formState.submitCount;
+            let t23;
+            if ($[32] !== formState.errors) {
+                t23 = Object.keys(formState.errors);
+                $[32] = formState.errors;
+                $[33] = t23;
+            } else t23 = $[33];
+            const t24 = t23.length;
+            let t25;
+            if ($[34] !== formState.dirtyFields) {
+                t25 = Object.keys(formState.dirtyFields);
+                $[34] = formState.dirtyFields;
+                $[35] = t25;
+            } else t25 = $[35];
+            const t26 = t25.length;
+            let t27;
+            if ($[36] !== formState.touchedFields) {
+                t27 = Object.keys(formState.touchedFields);
+                $[36] = formState.touchedFields;
+                $[37] = t27;
+            } else t27 = $[37];
+            let t28;
+            if ($[38] !== formState.isDirty || $[39] !== formState.isSubmitting || $[40] !== formState.isValid || $[41] !== formState.isValidating || $[42] !== formState.submitCount || $[43] !== t23.length || $[44] !== t25.length || $[45] !== t27.length) {
+                t28 = {
+                    isValid: t18,
+                    isDirty: t19,
+                    isSubmitting: t20,
+                    isValidating: t21,
+                    submitCount: t22,
+                    errorCount: t24,
+                    dirtyFieldsCount: t26,
+                    touchedFieldsCount: t27.length
+                };
+                $[38] = formState.isDirty;
+                $[39] = formState.isSubmitting;
+                $[40] = formState.isValid;
+                $[41] = formState.isValidating;
+                $[42] = formState.submitCount;
+                $[43] = t23.length;
+                $[44] = t25.length;
+                $[45] = t27.length;
+                $[46] = t28;
+            } else t28 = $[46];
+            stats = t28;
+            if (compact) {
+                const t29 = `p-4 ${className}`;
+                let t30;
+                if ($[47] !== title) {
+                    t30 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                        className: "text-sm font-semibold",
+                        children: title
+                    });
+                    $[47] = title;
+                    $[48] = t30;
+                } else t30 = $[48];
+                let t31;
+                if ($[49] !== stats.isValid) {
+                    t31 = stats.isValid ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
+                        variant: "default",
+                        className: "bg-green-600",
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                                className: "text-lg font-semibold",
-                                children: title
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CheckCircle2, {
+                                className: "w-3 h-3 mr-1"
                             }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                className: "flex gap-2",
-                                children: [
-                                    stats.isValid ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
-                                        variant: "default",
-                                        className: "bg-green-600",
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CheckCircle2, {
-                                                className: "w-3 h-3 mr-1"
-                                            }),
-                                            "Valid"
-                                        ]
-                                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
-                                        variant: "destructive",
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.XCircle, {
-                                                className: "w-3 h-3 mr-1"
-                                            }),
-                                            stats.errorCount,
-                                            " Error",
-                                            1 !== stats.errorCount ? 's' : ''
-                                        ]
-                                    }),
-                                    stats.isDirty && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
-                                        variant: "secondary",
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FileEdit, {
-                                                className: "w-3 h-3 mr-1"
-                                            }),
-                                            stats.dirtyFieldsCount,
-                                            " Changed"
-                                        ]
-                                    })
-                                ]
-                            })
+                            "Valid"
                         ]
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                        className: "grid grid-cols-4 gap-2 text-xs",
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
+                        variant: "destructive",
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                className: "text-center p-2 bg-muted rounded",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                        className: "font-semibold text-lg",
-                                        children: stats.submitCount
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                        className: "text-muted-foreground",
-                                        children: "Submits"
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                className: "text-center p-2 bg-muted rounded",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                        className: "font-semibold text-lg",
-                                        children: stats.errorCount
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                        className: "text-muted-foreground",
-                                        children: "Errors"
-                                    })
-                                ]
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.XCircle, {
+                                className: "w-3 h-3 mr-1"
                             }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                className: "text-center p-2 bg-muted rounded",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                        className: "font-semibold text-lg",
-                                        children: stats.dirtyFieldsCount
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                        className: "text-muted-foreground",
-                                        children: "Dirty"
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                className: "text-center p-2 bg-muted rounded",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                        className: "font-semibold text-lg",
-                                        children: stats.touchedFieldsCount
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                        className: "text-muted-foreground",
-                                        children: "Touched"
-                                    })
-                                ]
-                            })
+                            "Invalid"
                         ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.Tabs, {
-                value: activeTab,
-                onValueChange: setActiveTab,
-                className: "w-full",
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.TabsList, {
-                        className: "w-full justify-start rounded-none border-b px-4",
+                    });
+                    $[49] = stats.isValid;
+                    $[50] = t31;
+                } else t31 = $[50];
+                let t32;
+                if ($[51] !== stats.isDirty) {
+                    t32 = stats.isDirty && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
+                        variant: "secondary",
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.TabsTrigger, {
-                                value: "values",
-                                className: "gap-2",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Database, {
-                                        className: "w-4 h-4"
-                                    }),
-                                    "Values"
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.TabsTrigger, {
-                                value: "errors",
-                                className: "gap-2",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.AlertCircle, {
-                                        className: "w-4 h-4"
-                                    }),
-                                    "Errors",
-                                    stats.errorCount > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(badge_cjs_namespaceObject.Badge, {
-                                        variant: "destructive",
-                                        className: "ml-1 h-5",
-                                        children: stats.errorCount
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.TabsTrigger, {
-                                value: "state",
-                                className: "gap-2",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Eye, {
-                                        className: "w-4 h-4"
-                                    }),
-                                    "State"
-                                ]
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FileEdit, {
+                                className: "w-3 h-3 mr-1"
                             }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.TabsTrigger, {
-                                value: "fields",
-                                className: "gap-2",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FileEdit, {
-                                        className: "w-4 h-4"
-                                    }),
-                                    "Fields"
-                                ]
-                            })
+                            "Dirty"
                         ]
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(scroll_area_cjs_namespaceObject.ScrollArea, {
-                        className: "h-[400px]",
+                    });
+                    $[51] = stats.isDirty;
+                    $[52] = t32;
+                } else t32 = $[52];
+                let t33;
+                if ($[53] !== t31 || $[54] !== t32) {
+                    t33 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex gap-2",
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsContent, {
-                                value: "values",
-                                className: "p-4 m-0",
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                    className: "space-y-2",
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                            className: "text-sm text-muted-foreground mb-3",
-                                            children: "Current form values (updates in real-time)"
-                                        }),
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
-                                            className: "text-xs bg-muted p-4 rounded overflow-auto",
-                                            children: JSON.stringify(values, null, 2)
-                                        })
-                                    ]
-                                })
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsContent, {
-                                value: "errors",
-                                className: "p-4 m-0",
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                    className: "space-y-3",
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                            className: "text-sm text-muted-foreground mb-3",
-                                            children: "Validation errors from Zod schema"
-                                        }),
-                                        0 === Object.keys(formState.errors).length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                            className: "flex items-center gap-2 p-4 bg-green-50 dark:bg-green-900/10 rounded text-green-700 dark:text-green-400",
-                                            children: [
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CheckCircle2, {
-                                                    className: "w-5 h-5"
-                                                }),
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                    className: "text-sm font-medium",
-                                                    children: "No validation errors"
-                                                })
-                                            ]
-                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                            className: "space-y-2",
-                                            children: Object.entries(formState.errors).map(([field, error])=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                    className: "p-3 bg-destructive/10 rounded border border-destructive/20",
-                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                        className: "flex items-start gap-2",
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.XCircle, {
-                                                                className: "w-4 h-4 text-destructive mt-0.5"
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                                className: "flex-1",
-                                                                children: [
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                                        className: "font-mono text-sm font-semibold",
-                                                                        children: field
-                                                                    }),
-                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                                        className: "text-sm text-muted-foreground mt-1",
-                                                                        children: error?.message || 'Invalid value'
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    })
-                                                }, field))
-                                        })
-                                    ]
-                                })
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsContent, {
-                                value: "state",
-                                className: "p-4 m-0",
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                    className: "space-y-3",
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                            className: "text-sm text-muted-foreground mb-3",
-                                            children: "React Hook Form internal state"
-                                        }),
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                            className: "space-y-2",
-                                            children: [
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
-                                                    label: "Is Valid",
-                                                    value: stats.isValid
-                                                }),
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
-                                                    label: "Is Dirty",
-                                                    value: stats.isDirty
-                                                }),
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
-                                                    label: "Is Submitting",
-                                                    value: stats.isSubmitting
-                                                }),
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
-                                                    label: "Is Validating",
-                                                    value: stats.isValidating
-                                                }),
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
-                                                    label: "Is Submitted",
-                                                    value: formState.isSubmitted
-                                                }),
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
-                                                    label: "Is Submit Successful",
-                                                    value: formState.isSubmitSuccessful
-                                                }),
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
-                                                    label: "Submit Count",
-                                                    value: stats.submitCount,
-                                                    type: "number"
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
+                            t31,
+                            t32
+                        ]
+                    });
+                    $[53] = t31;
+                    $[54] = t32;
+                    $[55] = t33;
+                } else t33 = $[55];
+                let t34;
+                if ($[56] !== t30 || $[57] !== t33) {
+                    t34 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex items-center justify-between",
+                        children: [
+                            t30,
+                            t33
+                        ]
+                    });
+                    $[56] = t30;
+                    $[57] = t33;
+                    $[58] = t34;
+                } else t34 = $[58];
+                const t35 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "space-y-3",
+                    children: [
+                        t34,
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
+                            className: "text-xs bg-muted p-3 rounded overflow-auto max-h-40",
+                            children: JSON.stringify(values, null, 2)
+                        })
+                    ]
+                });
+                let t36;
+                if ($[59] !== t29 || $[60] !== t35) {
+                    t36 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.Card, {
+                        className: t29,
+                        children: t35
+                    });
+                    $[59] = t29;
+                    $[60] = t35;
+                    $[61] = t36;
+                } else t36 = $[61];
+                t17 = t36;
+                break bb0;
+            }
+            T3 = card_cjs_namespaceObject.Card;
+            t15 = `${className}`;
+            let t29;
+            if ($[62] !== title) {
+                t29 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                    className: "text-lg font-semibold",
+                    children: title
+                });
+                $[62] = title;
+                $[63] = t29;
+            } else t29 = $[63];
+            let t30;
+            if ($[64] !== stats.errorCount || $[65] !== stats.isValid) {
+                t30 = stats.isValid ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
+                    variant: "default",
+                    className: "bg-green-600",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CheckCircle2, {
+                            className: "w-3 h-3 mr-1"
+                        }),
+                        "Valid"
+                    ]
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
+                    variant: "destructive",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.XCircle, {
+                            className: "w-3 h-3 mr-1"
+                        }),
+                        stats.errorCount,
+                        " Error",
+                        1 !== stats.errorCount ? "s" : ""
+                    ]
+                });
+                $[64] = stats.errorCount;
+                $[65] = stats.isValid;
+                $[66] = t30;
+            } else t30 = $[66];
+            let t31;
+            if ($[67] !== stats.dirtyFieldsCount || $[68] !== stats.isDirty) {
+                t31 = stats.isDirty && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
+                    variant: "secondary",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FileEdit, {
+                            className: "w-3 h-3 mr-1"
+                        }),
+                        stats.dirtyFieldsCount,
+                        " Changed"
+                    ]
+                });
+                $[67] = stats.dirtyFieldsCount;
+                $[68] = stats.isDirty;
+                $[69] = t31;
+            } else t31 = $[69];
+            let t32;
+            if ($[70] !== t30 || $[71] !== t31) {
+                t32 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "flex gap-2",
+                    children: [
+                        t30,
+                        t31
+                    ]
+                });
+                $[70] = t30;
+                $[71] = t31;
+                $[72] = t32;
+            } else t32 = $[72];
+            let t33;
+            if ($[73] !== t29 || $[74] !== t32) {
+                t33 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "flex items-center justify-between mb-3",
+                    children: [
+                        t29,
+                        t32
+                    ]
+                });
+                $[73] = t29;
+                $[74] = t32;
+                $[75] = t33;
+            } else t33 = $[75];
+            let t34;
+            if ($[76] !== stats.submitCount) {
+                t34 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "font-semibold text-lg",
+                    children: stats.submitCount
+                });
+                $[76] = stats.submitCount;
+                $[77] = t34;
+            } else t34 = $[77];
+            let t35;
+            if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
+                t35 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "text-muted-foreground",
+                    children: "Submits"
+                });
+                $[78] = t35;
+            } else t35 = $[78];
+            let t36;
+            if ($[79] !== t34) {
+                t36 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "text-center p-2 bg-muted rounded",
+                    children: [
+                        t34,
+                        t35
+                    ]
+                });
+                $[79] = t34;
+                $[80] = t36;
+            } else t36 = $[80];
+            let t37;
+            if ($[81] !== stats.errorCount) {
+                t37 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "font-semibold text-lg",
+                    children: stats.errorCount
+                });
+                $[81] = stats.errorCount;
+                $[82] = t37;
+            } else t37 = $[82];
+            let t38;
+            if ($[83] === Symbol.for("react.memo_cache_sentinel")) {
+                t38 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "text-muted-foreground",
+                    children: "Errors"
+                });
+                $[83] = t38;
+            } else t38 = $[83];
+            let t39;
+            if ($[84] !== t37) {
+                t39 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "text-center p-2 bg-muted rounded",
+                    children: [
+                        t37,
+                        t38
+                    ]
+                });
+                $[84] = t37;
+                $[85] = t39;
+            } else t39 = $[85];
+            let t40;
+            if ($[86] !== stats.dirtyFieldsCount) {
+                t40 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "font-semibold text-lg",
+                    children: stats.dirtyFieldsCount
+                });
+                $[86] = stats.dirtyFieldsCount;
+                $[87] = t40;
+            } else t40 = $[87];
+            let t41;
+            if ($[88] === Symbol.for("react.memo_cache_sentinel")) {
+                t41 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "text-muted-foreground",
+                    children: "Dirty"
+                });
+                $[88] = t41;
+            } else t41 = $[88];
+            let t42;
+            if ($[89] !== t40) {
+                t42 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "text-center p-2 bg-muted rounded",
+                    children: [
+                        t40,
+                        t41
+                    ]
+                });
+                $[89] = t40;
+                $[90] = t42;
+            } else t42 = $[90];
+            let t43;
+            if ($[91] !== stats.touchedFieldsCount) {
+                t43 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "font-semibold text-lg",
+                    children: stats.touchedFieldsCount
+                });
+                $[91] = stats.touchedFieldsCount;
+                $[92] = t43;
+            } else t43 = $[92];
+            let t44;
+            if ($[93] === Symbol.for("react.memo_cache_sentinel")) {
+                t44 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "text-muted-foreground",
+                    children: "Touched"
+                });
+                $[93] = t44;
+            } else t44 = $[93];
+            let t45;
+            if ($[94] !== t43) {
+                t45 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "text-center p-2 bg-muted rounded",
+                    children: [
+                        t43,
+                        t44
+                    ]
+                });
+                $[94] = t43;
+                $[95] = t45;
+            } else t45 = $[95];
+            let t46;
+            if ($[96] !== t36 || $[97] !== t39 || $[98] !== t42 || $[99] !== t45) {
+                t46 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "grid grid-cols-4 gap-2 text-xs",
+                    children: [
+                        t36,
+                        t39,
+                        t42,
+                        t45
+                    ]
+                });
+                $[96] = t36;
+                $[97] = t39;
+                $[98] = t42;
+                $[99] = t45;
+                $[100] = t46;
+            } else t46 = $[100];
+            if ($[101] !== t33 || $[102] !== t46) {
+                t16 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "p-4 border-b",
+                    children: [
+                        t33,
+                        t46
+                    ]
+                });
+                $[101] = t33;
+                $[102] = t46;
+                $[103] = t16;
+            } else t16 = $[103];
+            T2 = tabs_cjs_namespaceObject.Tabs;
+            t11 = activeTab;
+            t12 = setActiveTab;
+            t13 = "w-full";
+            let t47;
+            if ($[104] === Symbol.for("react.memo_cache_sentinel")) {
+                t47 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.TabsTrigger, {
+                    value: "values",
+                    className: "gap-2",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Database, {
+                            className: "w-4 h-4"
+                        }),
+                        "Values"
+                    ]
+                });
+                $[104] = t47;
+            } else t47 = $[104];
+            let t48;
+            if ($[105] === Symbol.for("react.memo_cache_sentinel")) {
+                t48 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.AlertCircle, {
+                    className: "w-4 h-4"
+                });
+                $[105] = t48;
+            } else t48 = $[105];
+            let t49;
+            if ($[106] !== stats.errorCount) {
+                t49 = stats.errorCount > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(badge_cjs_namespaceObject.Badge, {
+                    variant: "destructive",
+                    className: "ml-1 h-5",
+                    children: stats.errorCount
+                });
+                $[106] = stats.errorCount;
+                $[107] = t49;
+            } else t49 = $[107];
+            let t50;
+            if ($[108] !== t49) {
+                t50 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.TabsTrigger, {
+                    value: "errors",
+                    className: "gap-2",
+                    children: [
+                        t48,
+                        "Errors",
+                        t49
+                    ]
+                });
+                $[108] = t49;
+                $[109] = t50;
+            } else t50 = $[109];
+            let t51;
+            if ($[110] === Symbol.for("react.memo_cache_sentinel")) {
+                t51 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.TabsTrigger, {
+                    value: "state",
+                    className: "gap-2",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Eye, {
+                            className: "w-4 h-4"
+                        }),
+                        "State"
+                    ]
+                });
+                $[110] = t51;
+            } else t51 = $[110];
+            let t52;
+            if ($[111] === Symbol.for("react.memo_cache_sentinel")) {
+                t52 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.TabsTrigger, {
+                    value: "fields",
+                    className: "gap-2",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FileEdit, {
+                            className: "w-4 h-4"
+                        }),
+                        "Fields"
+                    ]
+                });
+                $[111] = t52;
+            } else t52 = $[111];
+            if ($[112] !== t50) {
+                t14 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.TabsList, {
+                    className: "w-full justify-start rounded-none border-b px-4",
+                    children: [
+                        t47,
+                        t50,
+                        t51,
+                        t52
+                    ]
+                });
+                $[112] = t50;
+                $[113] = t14;
+            } else t14 = $[113];
+            T1 = scroll_area_cjs_namespaceObject.ScrollArea;
+            t10 = "h-[400px]";
+            T0 = tabs_cjs_namespaceObject.TabsContent;
+            t8 = "values";
+            t9 = "p-4 m-0";
+            t6 = "space-y-2";
+            if ($[114] === Symbol.for("react.memo_cache_sentinel")) {
+                t7 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                    className: "text-sm text-muted-foreground mb-3",
+                    children: "Current form values (updates in real-time)"
+                });
+                $[114] = t7;
+            } else t7 = $[114];
+            t4 = "text-xs bg-muted p-4 rounded overflow-auto";
+            t5 = JSON.stringify(values, null, 2);
+        }
+        $[0] = activeTab;
+        $[1] = className;
+        $[2] = compact;
+        $[3] = formState.dirtyFields;
+        $[4] = formState.errors;
+        $[5] = formState.isDirty;
+        $[6] = formState.isSubmitting;
+        $[7] = formState.isValid;
+        $[8] = formState.isValidating;
+        $[9] = formState.submitCount;
+        $[10] = formState.touchedFields;
+        $[11] = title;
+        $[12] = watch;
+        $[13] = T0;
+        $[14] = T1;
+        $[15] = T2;
+        $[16] = T3;
+        $[17] = stats;
+        $[18] = t10;
+        $[19] = t11;
+        $[20] = t12;
+        $[21] = t13;
+        $[22] = t14;
+        $[23] = t15;
+        $[24] = t16;
+        $[25] = t17;
+        $[26] = t4;
+        $[27] = t5;
+        $[28] = t6;
+        $[29] = t7;
+        $[30] = t8;
+        $[31] = t9;
+    } else {
+        T0 = $[13];
+        T1 = $[14];
+        T2 = $[15];
+        T3 = $[16];
+        stats = $[17];
+        t10 = $[18];
+        t11 = $[19];
+        t12 = $[20];
+        t13 = $[21];
+        t14 = $[22];
+        t15 = $[23];
+        t16 = $[24];
+        t17 = $[25];
+        t4 = $[26];
+        t5 = $[27];
+        t6 = $[28];
+        t7 = $[29];
+        t8 = $[30];
+        t9 = $[31];
+    }
+    if (t17 !== Symbol.for("react.early_return_sentinel")) return t17;
+    let t18;
+    if ($[115] !== t4 || $[116] !== t5) {
+        t18 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
+            className: t4,
+            children: t5
+        });
+        $[115] = t4;
+        $[116] = t5;
+        $[117] = t18;
+    } else t18 = $[117];
+    let t19;
+    if ($[118] !== t18 || $[119] !== t6 || $[120] !== t7) {
+        t19 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: t6,
+            children: [
+                t7,
+                t18
+            ]
+        });
+        $[118] = t18;
+        $[119] = t6;
+        $[120] = t7;
+        $[121] = t19;
+    } else t19 = $[121];
+    let t20;
+    if ($[122] !== T0 || $[123] !== t19 || $[124] !== t8 || $[125] !== t9) {
+        t20 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(T0, {
+            value: t8,
+            className: t9,
+            children: t19
+        });
+        $[122] = T0;
+        $[123] = t19;
+        $[124] = t8;
+        $[125] = t9;
+        $[126] = t20;
+    } else t20 = $[126];
+    let t21;
+    if ($[127] === Symbol.for("react.memo_cache_sentinel")) {
+        t21 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+            className: "text-sm text-muted-foreground mb-3",
+            children: "Validation errors from Zod schema"
+        });
+        $[127] = t21;
+    } else t21 = $[127];
+    let t22;
+    if ($[128] !== formState.errors) {
+        t22 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsContent, {
+            value: "errors",
+            className: "p-4 m-0",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "space-y-3",
+                children: [
+                    t21,
+                    0 === Object.keys(formState.errors).length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex items-center gap-2 p-4 bg-green-50 dark:bg-green-900/10 rounded text-green-700 dark:text-green-400",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CheckCircle2, {
+                                className: "w-5 h-5"
                             }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsContent, {
-                                value: "fields",
-                                className: "p-4 m-0",
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                    className: "space-y-3",
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                                            className: "text-sm text-muted-foreground mb-3",
-                                            children: "Field-level state tracking"
-                                        }),
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                            className: "space-y-4",
-                                            children: [
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                    children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("h4", {
-                                                            className: "text-sm font-semibold mb-2 flex items-center gap-2",
-                                                            children: [
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FileEdit, {
-                                                                    className: "w-4 h-4"
-                                                                }),
-                                                                "Dirty Fields (",
-                                                                stats.dirtyFieldsCount,
-                                                                ")"
-                                                            ]
-                                                        }),
-                                                        0 === Object.keys(formState.dirtyFields).length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                            className: "text-sm text-muted-foreground italic p-2 bg-muted rounded",
-                                                            children: "No fields modified yet"
-                                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                            className: "flex flex-wrap gap-2",
-                                                            children: Object.keys(formState.dirtyFields).map((field)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(badge_cjs_namespaceObject.Badge, {
-                                                                    variant: "secondary",
-                                                                    children: field
-                                                                }, field))
-                                                        })
-                                                    ]
-                                                }),
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                    children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("h4", {
-                                                            className: "text-sm font-semibold mb-2 flex items-center gap-2",
-                                                            children: [
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Eye, {
-                                                                    className: "w-4 h-4"
-                                                                }),
-                                                                "Touched Fields (",
-                                                                stats.touchedFieldsCount,
-                                                                ")"
-                                                            ]
-                                                        }),
-                                                        0 === Object.keys(formState.touchedFields).length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                            className: "text-sm text-muted-foreground italic p-2 bg-muted rounded",
-                                                            children: "No fields touched yet"
-                                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                            className: "flex flex-wrap gap-2",
-                                                            children: Object.keys(formState.touchedFields).map((field)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(badge_cjs_namespaceObject.Badge, {
-                                                                    variant: "outline",
-                                                                    children: field
-                                                                }, field))
-                                                        })
-                                                    ]
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "text-sm font-medium",
+                                children: "No validation errors"
                             })
                         ]
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "space-y-2",
+                        children: Object.entries(formState.errors).map(_temp)
                     })
                 ]
             })
-        ]
-    });
-}
-function StateItem({ label, value, type = 'boolean' }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: "flex items-center justify-between p-2 bg-muted rounded",
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                className: "text-sm font-medium",
-                children: label
-            }),
-            'boolean' === type ? value ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
-                variant: "default",
-                className: "bg-green-600",
+        });
+        $[128] = formState.errors;
+        $[129] = t22;
+    } else t22 = $[129];
+    let t23;
+    if ($[130] === Symbol.for("react.memo_cache_sentinel")) {
+        t23 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+            className: "text-sm text-muted-foreground mb-3",
+            children: "React Hook Form internal state"
+        });
+        $[130] = t23;
+    } else t23 = $[130];
+    let t24;
+    if ($[131] !== stats.isValid) {
+        t24 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
+            label: "Is Valid",
+            value: stats.isValid
+        });
+        $[131] = stats.isValid;
+        $[132] = t24;
+    } else t24 = $[132];
+    let t25;
+    if ($[133] !== stats.isDirty) {
+        t25 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
+            label: "Is Dirty",
+            value: stats.isDirty
+        });
+        $[133] = stats.isDirty;
+        $[134] = t25;
+    } else t25 = $[134];
+    let t26;
+    if ($[135] !== stats.isSubmitting) {
+        t26 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
+            label: "Is Submitting",
+            value: stats.isSubmitting
+        });
+        $[135] = stats.isSubmitting;
+        $[136] = t26;
+    } else t26 = $[136];
+    let t27;
+    if ($[137] !== stats.isValidating) {
+        t27 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
+            label: "Is Validating",
+            value: stats.isValidating
+        });
+        $[137] = stats.isValidating;
+        $[138] = t27;
+    } else t27 = $[138];
+    let t28;
+    if ($[139] !== formState.isSubmitted) {
+        t28 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
+            label: "Is Submitted",
+            value: formState.isSubmitted
+        });
+        $[139] = formState.isSubmitted;
+        $[140] = t28;
+    } else t28 = $[140];
+    let t29;
+    if ($[141] !== formState.isSubmitSuccessful) {
+        t29 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
+            label: "Is Submit Successful",
+            value: formState.isSubmitSuccessful
+        });
+        $[141] = formState.isSubmitSuccessful;
+        $[142] = t29;
+    } else t29 = $[142];
+    let t30;
+    if ($[143] !== stats.submitCount) {
+        t30 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StateItem, {
+            label: "Submit Count",
+            value: stats.submitCount,
+            type: "number"
+        });
+        $[143] = stats.submitCount;
+        $[144] = t30;
+    } else t30 = $[144];
+    let t31;
+    if ($[145] !== t24 || $[146] !== t25 || $[147] !== t26 || $[148] !== t27 || $[149] !== t28 || $[150] !== t29 || $[151] !== t30) {
+        t31 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsContent, {
+            value: "state",
+            className: "p-4 m-0",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "space-y-3",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CheckCircle2, {
-                        className: "w-3 h-3 mr-1"
-                    }),
-                    "True"
+                    t23,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "space-y-2",
+                        children: [
+                            t24,
+                            t25,
+                            t26,
+                            t27,
+                            t28,
+                            t29,
+                            t30
+                        ]
+                    })
                 ]
-            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
-                variant: "secondary",
+            })
+        });
+        $[145] = t24;
+        $[146] = t25;
+        $[147] = t26;
+        $[148] = t27;
+        $[149] = t28;
+        $[150] = t29;
+        $[151] = t30;
+        $[152] = t31;
+    } else t31 = $[152];
+    let t32;
+    if ($[153] === Symbol.for("react.memo_cache_sentinel")) {
+        t32 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+            className: "text-sm text-muted-foreground mb-3",
+            children: "Field-level state tracking"
+        });
+        $[153] = t32;
+    } else t32 = $[153];
+    let t33;
+    if ($[154] === Symbol.for("react.memo_cache_sentinel")) {
+        t33 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FileEdit, {
+            className: "w-4 h-4"
+        });
+        $[154] = t33;
+    } else t33 = $[154];
+    let t34;
+    if ($[155] !== stats.dirtyFieldsCount) {
+        t34 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("h4", {
+            className: "text-sm font-semibold mb-2 flex items-center gap-2",
+            children: [
+                t33,
+                "Dirty Fields (",
+                stats.dirtyFieldsCount,
+                ")"
+            ]
+        });
+        $[155] = stats.dirtyFieldsCount;
+        $[156] = t34;
+    } else t34 = $[156];
+    let t35;
+    if ($[157] !== formState.dirtyFields) {
+        t35 = 0 === Object.keys(formState.dirtyFields).length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: "text-sm text-muted-foreground italic p-2 bg-muted rounded",
+            children: "No fields modified yet"
+        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: "flex flex-wrap gap-2",
+            children: Object.keys(formState.dirtyFields).map(_temp2)
+        });
+        $[157] = formState.dirtyFields;
+        $[158] = t35;
+    } else t35 = $[158];
+    let t36;
+    if ($[159] !== t34 || $[160] !== t35) {
+        t36 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            children: [
+                t34,
+                t35
+            ]
+        });
+        $[159] = t34;
+        $[160] = t35;
+        $[161] = t36;
+    } else t36 = $[161];
+    let t37;
+    if ($[162] === Symbol.for("react.memo_cache_sentinel")) {
+        t37 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Eye, {
+            className: "w-4 h-4"
+        });
+        $[162] = t37;
+    } else t37 = $[162];
+    let t38;
+    if ($[163] !== stats.touchedFieldsCount) {
+        t38 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("h4", {
+            className: "text-sm font-semibold mb-2 flex items-center gap-2",
+            children: [
+                t37,
+                "Touched Fields (",
+                stats.touchedFieldsCount,
+                ")"
+            ]
+        });
+        $[163] = stats.touchedFieldsCount;
+        $[164] = t38;
+    } else t38 = $[164];
+    let t39;
+    if ($[165] !== formState.touchedFields) {
+        t39 = 0 === Object.keys(formState.touchedFields).length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: "text-sm text-muted-foreground italic p-2 bg-muted rounded",
+            children: "No fields touched yet"
+        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: "flex flex-wrap gap-2",
+            children: Object.keys(formState.touchedFields).map(_temp3)
+        });
+        $[165] = formState.touchedFields;
+        $[166] = t39;
+    } else t39 = $[166];
+    let t40;
+    if ($[167] !== t38 || $[168] !== t39) {
+        t40 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            children: [
+                t38,
+                t39
+            ]
+        });
+        $[167] = t38;
+        $[168] = t39;
+        $[169] = t40;
+    } else t40 = $[169];
+    let t41;
+    if ($[170] !== t36 || $[171] !== t40) {
+        t41 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsContent, {
+            value: "fields",
+            className: "p-4 m-0",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "space-y-3",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.XCircle, {
-                        className: "w-3 h-3 mr-1"
-                    }),
-                    "False"
+                    t32,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "space-y-4",
+                        children: [
+                            t36,
+                            t40
+                        ]
+                    })
                 ]
-            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(badge_cjs_namespaceObject.Badge, {
-                variant: "outline",
-                children: value
             })
-        ]
-    });
+        });
+        $[170] = t36;
+        $[171] = t40;
+        $[172] = t41;
+    } else t41 = $[172];
+    let t42;
+    if ($[173] !== T1 || $[174] !== t10 || $[175] !== t20 || $[176] !== t22 || $[177] !== t31 || $[178] !== t41) {
+        t42 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(T1, {
+            className: t10,
+            children: [
+                t20,
+                t22,
+                t31,
+                t41
+            ]
+        });
+        $[173] = T1;
+        $[174] = t10;
+        $[175] = t20;
+        $[176] = t22;
+        $[177] = t31;
+        $[178] = t41;
+        $[179] = t42;
+    } else t42 = $[179];
+    let t43;
+    if ($[180] !== T2 || $[181] !== t11 || $[182] !== t12 || $[183] !== t13 || $[184] !== t14 || $[185] !== t42) {
+        t43 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(T2, {
+            value: t11,
+            onValueChange: t12,
+            className: t13,
+            children: [
+                t14,
+                t42
+            ]
+        });
+        $[180] = T2;
+        $[181] = t11;
+        $[182] = t12;
+        $[183] = t13;
+        $[184] = t14;
+        $[185] = t42;
+        $[186] = t43;
+    } else t43 = $[186];
+    let t44;
+    if ($[187] !== T3 || $[188] !== t15 || $[189] !== t16 || $[190] !== t43) {
+        t44 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(T3, {
+            className: t15,
+            children: [
+                t16,
+                t43
+            ]
+        });
+        $[187] = T3;
+        $[188] = t15;
+        $[189] = t16;
+        $[190] = t43;
+        $[191] = t44;
+    } else t44 = $[191];
+    return t44;
+}
+function _temp3(field_1) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(badge_cjs_namespaceObject.Badge, {
+        variant: "outline",
+        children: field_1
+    }, field_1);
+}
+function _temp2(field_0) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(badge_cjs_namespaceObject.Badge, {
+        variant: "secondary",
+        children: field_0
+    }, field_0);
+}
+function _temp(t0) {
+    const [field, error] = t0;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "p-3 bg-destructive/10 rounded border border-destructive/20",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: "flex items-start gap-2",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.XCircle, {
+                    className: "w-4 h-4 text-destructive mt-0.5"
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "flex-1",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            className: "font-mono text-sm font-semibold",
+                            children: field
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            className: "text-sm text-muted-foreground mt-1",
+                            children: error?.message || "Invalid value"
+                        })
+                    ]
+                })
+            ]
+        })
+    }, field);
+}
+function StateItem(t0) {
+    const $ = (0, compiler_runtime_namespaceObject.c)(8);
+    const { label, value, type: t1 } = t0;
+    const type = void 0 === t1 ? "boolean" : t1;
+    let t2;
+    if ($[0] !== label) {
+        t2 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+            className: "text-sm font-medium",
+            children: label
+        });
+        $[0] = label;
+        $[1] = t2;
+    } else t2 = $[1];
+    let t3;
+    if ($[2] !== type || $[3] !== value) {
+        t3 = "boolean" === type ? value ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
+            variant: "default",
+            className: "bg-green-600",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CheckCircle2, {
+                    className: "w-3 h-3 mr-1"
+                }),
+                "True"
+            ]
+        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(badge_cjs_namespaceObject.Badge, {
+            variant: "secondary",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.XCircle, {
+                    className: "w-3 h-3 mr-1"
+                }),
+                "False"
+            ]
+        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(badge_cjs_namespaceObject.Badge, {
+            variant: "outline",
+            children: value
+        });
+        $[2] = type;
+        $[3] = value;
+        $[4] = t3;
+    } else t3 = $[4];
+    let t4;
+    if ($[5] !== t2 || $[6] !== t3) {
+        t4 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: "flex items-center justify-between p-2 bg-muted rounded",
+            children: [
+                t2,
+                t3
+            ]
+        });
+        $[5] = t2;
+        $[6] = t3;
+        $[7] = t4;
+    } else t4 = $[7];
+    return t4;
 }
 exports.FormStateViewer = __webpack_exports__.FormStateViewer;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [