@uipath/apollo-wind 0.7.2-pr188.4865fad

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

@@ -0,0 +1,498 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    FormStateViewer: ()=>FormStateViewer
+});
+const jsx_runtime_namespaceObject = require("react/jsx-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');
+    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",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                                className: "text-lg 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"
+                                            }),
+                                            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"
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "grid grid-cols-4 gap-2 text-xs",
+                        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.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"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__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",
+                        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.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"
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(scroll_area_cjs_namespaceObject.ScrollArea, {
+                        className: "h-[400px]",
+                        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"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__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))
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+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",
+                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
+            })
+        ]
+    });
+}
+exports.FormStateViewer = __webpack_exports__.FormStateViewer;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FormStateViewer"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/forms/form-state-viewer.d.ts

@@ -0,0 +1,15 @@
+import type { UseFormReturn, FieldValues } from 'react-hook-form';
+/**
+ * FormStateViewer Component
+ *
+ * Displays React Hook Form state in a user-friendly way
+ * Shows values, errors, dirty fields, and form metadata
+ */
+interface FormStateViewerProps {
+    form: UseFormReturn<FieldValues>;
+    title?: string;
+    className?: string;
+    compact?: boolean;
+}
+export declare function FormStateViewer({ form, title, className, compact, }: FormStateViewerProps): import("react/jsx-runtime").JSX.Element;
+export {};