@dynamic-field-kit/react 1.4.0 → 1.5.1

package/dist/index.js

@@ -30,22 +30,26 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  DynamicFormDevTools: () => DynamicFormDevTools,
   DynamicInput: () => DynamicInput_default,
   FieldInput: () => FieldInput_default,
-  FieldRegistry: () => import_core5.FieldRegistry,
+  FieldRegistry: () => import_core6.FieldRegistry,
   FieldRegistryProvider: () => FieldRegistryProvider,
   MultiFieldInput: () => MultiFieldInput_default,
+  defaultRenderersMap: () => defaultRenderersMap,
   fieldRegistry: () => fieldRegistry,
+  getDefaultRenderer: () => getDefaultRenderer,
   layoutRegistry: () => layoutRegistry,
-  resolveDisabled: () => import_core6.resolveDisabled,
-  resolveOptions: () => import_core6.resolveOptions,
-  resolveReadOnly: () => import_core6.resolveReadOnly,
+  resolveDisabled: () => import_core7.resolveDisabled,
+  resolveOptions: () => import_core7.resolveOptions,
+  resolveReadOnly: () => import_core7.resolveReadOnly,
+  useDynamicForm: () => useDynamicForm,
   useFieldRegistry: () => useFieldRegistry,
-  validateField: () => import_core6.validateField,
-  validateFieldAsync: () => import_core6.validateFieldAsync,
-  validateFields: () => import_core6.validateFields,
-  validateFieldsAsync: () => import_core6.validateFieldsAsync,
-  validators: () => import_core6.validators
+  validateField: () => import_core7.validateField,
+  validateFieldAsync: () => import_core7.validateFieldAsync,
+  validateFields: () => import_core7.validateFields,
+  validateFieldsAsync: () => import_core7.validateFieldsAsync,
+  validators: () => import_core7.validators
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -164,6 +168,307 @@ layoutRegistry.register("responsive", ({ children, config }) => {
 // src/components/DynamicInput.tsx
 var import_react3 = __toESM(require("react"));
 
+// src/defaultRenderers.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DefaultTextRenderer = ({
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  readOnly,
+  required,
+  placeholder,
+  id,
+  className,
+  ariaInvalid,
+  ariaDescribedBy,
+  ariaRequired,
+  inputType = "text"
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "input",
+  {
+    type: inputType,
+    id,
+    className,
+    value: value ?? "",
+    onChange: (e) => onValueChange?.(e.target.value),
+    onBlur,
+    disabled,
+    readOnly,
+    required,
+    placeholder,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-required": ariaRequired
+  }
+);
+var DefaultNumberRenderer = ({
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  readOnly,
+  required,
+  placeholder,
+  id,
+  className,
+  ariaInvalid,
+  ariaDescribedBy,
+  ariaRequired
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "input",
+  {
+    type: "number",
+    id,
+    className,
+    value: value ?? "",
+    onChange: (e) => onValueChange?.(
+      e.target.value === "" ? void 0 : Number(e.target.value)
+    ),
+    onBlur,
+    disabled,
+    readOnly,
+    required,
+    placeholder,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-required": ariaRequired
+  }
+);
+var DefaultPasswordRenderer = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultTextRenderer, { ...props, inputType: "password" });
+var DefaultEmailRenderer = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultTextRenderer, { ...props, inputType: "email" });
+var DefaultTextareaRenderer = ({
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  readOnly,
+  required,
+  placeholder,
+  id,
+  className,
+  ariaInvalid,
+  ariaDescribedBy,
+  ariaRequired
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "textarea",
+  {
+    id,
+    className,
+    value: value ?? "",
+    onChange: (e) => onValueChange?.(e.target.value),
+    onBlur,
+    disabled,
+    readOnly,
+    required,
+    placeholder,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-required": ariaRequired
+  }
+);
+var DefaultCheckboxRenderer = ({
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  readOnly,
+  required,
+  id,
+  className,
+  ariaInvalid,
+  ariaDescribedBy,
+  ariaRequired
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "input",
+  {
+    type: "checkbox",
+    id,
+    className,
+    checked: Boolean(value),
+    onChange: (e) => onValueChange?.(e.target.checked),
+    onBlur,
+    disabled: disabled || readOnly,
+    required,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-required": ariaRequired
+  }
+);
+var DefaultSelectRenderer = ({
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  readOnly,
+  required,
+  options = [],
+  id,
+  className,
+  ariaInvalid,
+  ariaDescribedBy,
+  ariaRequired
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  "select",
+  {
+    id,
+    className,
+    value: value ?? "",
+    onChange: (e) => onValueChange?.(e.target.value),
+    onBlur,
+    disabled: disabled || readOnly,
+    required,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-required": ariaRequired,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", disabled: true, children: "-- Select --" }),
+      options.map((opt, i) => {
+        const optVal = opt.value ?? opt.id ?? opt;
+        const optLabel = opt.label ?? opt.name ?? String(optVal);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: String(optVal), children: String(optLabel) }, String(optVal) + i);
+      })
+    ]
+  }
+);
+var DefaultRadioRenderer = ({
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  readOnly,
+  required,
+  options = [],
+  id,
+  className,
+  ariaInvalid,
+  ariaDescribedBy
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `dfk-radio-group ${className || ""}`, id, onBlur, children: options.map((opt, i) => {
+  const optVal = opt.value ?? opt.id ?? opt;
+  const optLabel = opt.label ?? opt.name ?? String(optVal);
+  const isChecked = String(value) === String(optVal);
+  const radioId = `${id || "radio"}-${i}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "label",
+    {
+      htmlFor: radioId,
+      style: {
+        marginRight: "12px",
+        display: "inline-flex",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            type: "radio",
+            id: radioId,
+            name: id,
+            value: String(optVal),
+            checked: isChecked,
+            onChange: () => onValueChange?.(optVal),
+            disabled: disabled || readOnly,
+            required,
+            "aria-invalid": ariaInvalid,
+            "aria-describedby": ariaDescribedBy
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { marginLeft: "4px" }, children: String(optLabel) })
+      ]
+    },
+    String(optVal) + i
+  );
+}) });
+var DefaultRangeRenderer = ({
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  readOnly,
+  required,
+  min,
+  max,
+  step,
+  id,
+  className,
+  ariaInvalid,
+  ariaDescribedBy
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "input",
+  {
+    type: "range",
+    id,
+    className,
+    value: value ?? min ?? 0,
+    min,
+    max,
+    step,
+    onChange: (e) => onValueChange?.(Number(e.target.value)),
+    onBlur,
+    disabled: disabled || readOnly,
+    required,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy
+  }
+);
+var DefaultFileRenderer = ({
+  onValueChange,
+  onBlur,
+  disabled,
+  readOnly,
+  required,
+  accept,
+  multiple,
+  id,
+  className,
+  ariaInvalid,
+  ariaDescribedBy
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "input",
+  {
+    type: "file",
+    id,
+    className,
+    accept,
+    multiple,
+    onChange: (e) => {
+      const files = e.target.files;
+      if (!files) {
+        return;
+      }
+      onValueChange?.(multiple ? Array.from(files) : files[0] || null);
+    },
+    onBlur,
+    disabled: disabled || readOnly,
+    required,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy
+  }
+);
+var DefaultDateRenderer = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultTextRenderer, { ...props, inputType: "date" });
+var DefaultTimeRenderer = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultTextRenderer, { ...props, inputType: "time" });
+var DefaultDateTimeLocalRenderer = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultTextRenderer, { ...props, inputType: "datetime-local" });
+var DefaultSwitchRenderer = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultCheckboxRenderer, { ...props });
+var defaultRenderersMap = {
+  text: DefaultTextRenderer,
+  number: DefaultNumberRenderer,
+  password: DefaultPasswordRenderer,
+  email: DefaultEmailRenderer,
+  textarea: DefaultTextareaRenderer,
+  checkbox: DefaultCheckboxRenderer,
+  select: DefaultSelectRenderer,
+  radio: DefaultRadioRenderer,
+  range: DefaultRangeRenderer,
+  file: DefaultFileRenderer,
+  date: DefaultDateRenderer,
+  time: DefaultTimeRenderer,
+  "datetime-local": DefaultDateTimeLocalRenderer,
+  switch: DefaultSwitchRenderer
+};
+function getDefaultRenderer(type) {
+  return defaultRenderersMap[type];
+}
+
 // src/FieldRegistryContext.tsx
 var import_react2 = require("react");
 
@@ -172,18 +477,18 @@ var import_core = require("@dynamic-field-kit/core");
 var fieldRegistry = import_core.fieldRegistry;
 
 // src/FieldRegistryContext.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var FieldRegistryContext = (0, import_react2.createContext)(fieldRegistry);
 var FieldRegistryProvider = ({
   registry,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldRegistryContext.Provider, { value: registry, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldRegistryContext.Provider, { value: registry, children });
 function useFieldRegistry() {
   return (0, import_react2.useContext)(FieldRegistryContext);
 }
 
 // src/components/DynamicInput.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var DynamicInputInner = ({
   type,
   value,
@@ -207,11 +512,11 @@ var DynamicInputInner = ({
 }) => {
   const registry = useFieldRegistry();
   const Renderer = (0, import_react3.useMemo)(
-    () => registry.get(type),
+    () => registry.get(type) || getDefaultRenderer(type),
     [registry, type]
   );
   if (!Renderer) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
       "Unknown field type: ",
       type
     ] });
@@ -237,7 +542,7 @@ var DynamicInputInner = ({
     ariaRequired
   });
 };
-var DynamicInput = import_react3.default.memo(
+var DynamicInput = /* @__PURE__ */ import_react3.default.memo(
   DynamicInputInner
 );
 var DynamicInput_default = DynamicInput;
@@ -253,7 +558,7 @@ var import_react5 = require("react");
 // src/components/MultiFieldInput.tsx
 var import_core2 = require("@dynamic-field-kit/core");
 var import_react4 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function resolveLayout(layout) {
   if (!layout) {
     return { type: "column", config: {} };
@@ -269,7 +574,8 @@ var MultiFieldInput = ({
   onChange,
   layout,
   rootData,
-  onValidityChange
+  onValidityChange,
+  onBlurField
 }) => {
   const [data, setData] = (0, import_react4.useState)({});
   const [touchedFields, setTouchedFields] = (0, import_react4.useState)(
@@ -298,6 +604,8 @@ var MultiFieldInput = ({
   rootDataRef.current = rootData;
   const onValidityChangeRef = (0, import_react4.useRef)(onValidityChange);
   onValidityChangeRef.current = onValidityChange;
+  const onBlurFieldRef = (0, import_react4.useRef)(onBlurField);
+  onBlurFieldRef.current = onBlurField;
   (0, import_react4.useEffect)(() => {
     onValidityChangeRef.current?.(
       (0, import_core2.validateFields)(fieldDescriptions, data, rootData)
@@ -316,13 +624,14 @@ var MultiFieldInput = ({
   }, []);
   const handleBlurField = (0, import_react4.useCallback)((key) => {
     setTouchedFields((prev) => prev[key] ? prev : { ...prev, [key]: true });
+    onBlurFieldRef.current?.(key);
   }, []);
   const { type, config } = resolveLayout(layout);
   const Layout = layoutRegistry.get(type);
   if (!Layout) {
     throw new Error(`Unknown layout: ${type}`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     FieldInput_default,
     {
       fieldDescription: f,
@@ -339,7 +648,7 @@ var MultiFieldInput = ({
 var MultiFieldInput_default = MultiFieldInput;
 
 // src/components/FieldGroupInput.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var FieldGroupInput = ({
   fieldDescription,
   items,
@@ -380,14 +689,14 @@ var FieldGroupInput = ({
     },
     [fieldDescription, items, onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: fieldDescription.className, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: label }),
-    items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: fieldDescription.className, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: label }),
+    items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         style: { display: "flex", alignItems: "flex-start", gap: 8 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             MultiFieldInput_default,
             {
               fieldDescriptions: fields,
@@ -396,7 +705,7 @@ var FieldGroupInput = ({
               onChange: (next) => handleItemChange(index, next)
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -410,7 +719,7 @@ var FieldGroupInput = ({
       },
       itemKey(item, index)
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
@@ -425,7 +734,7 @@ var FieldGroupInput = ({
 var FieldGroupInput_default = FieldGroupInput;
 
 // src/components/FieldInput.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var FieldInputInner = ({
   fieldDescription,
   renderInfos,
@@ -446,7 +755,7 @@ var FieldInputInner = ({
   );
   if (fields) {
     const items = Array.isArray(renderInfos[name]) ? renderInfos[name] : [];
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       FieldGroupInput_default,
       {
         fieldDescription,
@@ -470,7 +779,7 @@ var FieldInputInner = ({
   const errors = effectiveDisabled ? [] : (0, import_core4.validateField)(fieldDescription, renderInfos[name], renderInfos, rootData);
   const error = errors.length > 0 ? errors : void 0;
   const fieldId = `dfk-field-${name}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     DynamicInput_default,
     {
       id: fieldId,
@@ -494,27 +803,338 @@ var FieldInputInner = ({
     }
   );
 };
-var FieldInput = import_react6.default.memo(FieldInputInner, (prev, next) => {
+var FieldInput = /* @__PURE__ */ import_react6.default.memo(FieldInputInner, (prev, next) => {
   const name = prev.fieldDescription.name;
   return prev.fieldDescription === next.fieldDescription && prev.onValueChangeField === next.onValueChangeField && prev.onBlurField === next.onBlurField && prev.rootData === next.rootData && prev.touched === next.touched && prev.dirty === next.dirty && prev.renderInfos[name] === next.renderInfos[name];
 });
 var FieldInput_default = FieldInput;
 
-// src/index.ts
+// src/components/DynamicFormDevTools.tsx
+var import_react7 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DynamicFormDevTools = ({
+  data,
+  errors = {},
+  touched = {},
+  isDirty = false,
+  fields = [],
+  position = "bottom-right"
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+  const [activeTab, setActiveTab] = (0, import_react7.useState)("data");
+  const errorCount = Object.keys(errors).length;
+  const posStyle = position === "bottom-left" ? { left: "16px", bottom: "16px" } : { right: "16px", bottom: "16px" };
+  if (!isOpen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(true),
+        style: {
+          position: "fixed",
+          ...posStyle,
+          zIndex: 99999,
+          background: "#1e293b",
+          color: "#f8fafc",
+          border: "1px solid #334155",
+          borderRadius: "20px",
+          padding: "8px 14px",
+          fontSize: "12px",
+          fontWeight: 600,
+          cursor: "pointer",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+          display: "flex",
+          alignItems: "center",
+          gap: "6px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "\u{1F50D} DevTools" }),
+          errorCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "span",
+            {
+              style: {
+                background: "#ef4444",
+                color: "#fff",
+                borderRadius: "10px",
+                padding: "2px 6px",
+                fontSize: "10px"
+              },
+              children: errorCount
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        ...posStyle,
+        zIndex: 99999,
+        width: "360px",
+        maxHeight: "420px",
+        background: "#0f172a",
+        color: "#f8fafc",
+        border: "1px solid #334155",
+        borderRadius: "12px",
+        boxShadow: "0 10px 25px rgba(0,0,0,0.3)",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: "monospace, sans-serif",
+        fontSize: "12px",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "10px 14px",
+              background: "#1e293b",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              borderBottom: "1px solid #334155"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontWeight: "bold", color: "#38bdf8" }, children: "\u{1F6E0}\uFE0F Form DevTools" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setIsOpen(false),
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "#94a3b8",
+                    fontSize: "14px",
+                    cursor: "pointer"
+                  },
+                  children: "\u2715"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              background: "#1e293b",
+              borderBottom: "1px solid #334155"
+            },
+            children: ["data", "errors", "meta", "fields"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setActiveTab(tab),
+                style: {
+                  flex: 1,
+                  padding: "6px 0",
+                  background: activeTab === tab ? "#0f172a" : "transparent",
+                  color: activeTab === tab ? "#38bdf8" : "#94a3b8",
+                  border: "none",
+                  cursor: "pointer",
+                  textTransform: "capitalize",
+                  fontSize: "11px",
+                  fontWeight: activeTab === tab ? "bold" : "normal"
+                },
+                children: [
+                  tab,
+                  " ",
+                  tab === "errors" && errorCount > 0 ? `(${errorCount})` : ""
+                ]
+              },
+              tab
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: "12px", overflowY: "auto", flex: 1 }, children: [
+          activeTab === "data" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "pre",
+            {
+              style: {
+                margin: 0,
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-all",
+                color: "#a7f3d0"
+              },
+              children: JSON.stringify(data, null, 2)
+            }
+          ),
+          activeTab === "errors" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: Object.keys(errors).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#4ade80" }, children: "\u2713 No validation errors" }) : Object.entries(errors).map(([field, msgs]) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#f87171", fontWeight: "bold" }, children: [
+              field,
+              ":"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { style: { margin: "4px 0 0 16px", padding: 0 }, children: msgs.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { style: { color: "#fca5a5" }, children: m }, i)) })
+          ] }, field)) }),
+          activeTab === "meta" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { marginBottom: "6px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#94a3b8" }, children: "isDirty: " }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: isDirty ? "#facc15" : "#4ade80" }, children: String(isDirty) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#94a3b8" }, children: "Touched Fields:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pre", { style: { margin: "4px 0 0 0", color: "#cbd5e1" }, children: JSON.stringify(touched, null, 2) })
+            ] })
+          ] }),
+          activeTab === "fields" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#94a3b8" }, children: "No field descriptions passed" }) : fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "div",
+            {
+              style: {
+                padding: "6px",
+                marginBottom: "6px",
+                background: "#1e293b",
+                borderRadius: "4px"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#38bdf8", fontWeight: "bold" }, children: f.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { color: "#94a3b8", fontSize: "10px" }, children: [
+                  "type: ",
+                  f.type,
+                  " | required: ",
+                  String(Boolean(f.required))
+                ] })
+              ]
+            },
+            f.name
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/useDynamicForm.ts
 var import_core5 = require("@dynamic-field-kit/core");
+var import_react8 = require("react");
+function useDynamicForm({
+  fields,
+  initialValues = {},
+  validateOnBlur = true,
+  validateOnChange = false
+}) {
+  const [data, setData] = (0, import_react8.useState)(
+    () => (0, import_core5.applyComputedValues)(fields, initialValues)
+  );
+  const [errors, setErrors] = (0, import_react8.useState)({});
+  const [isDirty, setIsDirty] = (0, import_react8.useState)(false);
+  const [touched, setTouched] = (0, import_react8.useState)({});
+  const [isSubmitting, setIsSubmitting] = (0, import_react8.useState)(false);
+  const [isSubmitted, setIsSubmitted] = (0, import_react8.useState)(false);
+  const validate = (0, import_react8.useCallback)(() => {
+    const res = (0, import_core5.validateFields)(fields, data);
+    setErrors(res.errors);
+    return res.valid;
+  }, [fields, data]);
+  const handleChange = (0, import_react8.useCallback)(
+    (newData) => {
+      const next = (0, import_core5.applyComputedValues)(fields, newData);
+      setData(next);
+      setIsDirty(true);
+      if (validateOnChange) {
+        const res = (0, import_core5.validateFields)(fields, next);
+        setErrors(res.errors);
+      }
+    },
+    [fields, validateOnChange]
+  );
+  const setFieldValue = (0, import_react8.useCallback)(
+    (name, value) => {
+      handleChange({ ...data, [name]: value });
+    },
+    [data, handleChange]
+  );
+  const setFieldTouched = (0, import_react8.useCallback)((name, isTouched = true) => {
+    setTouched((prev) => ({ ...prev, [name]: isTouched }));
+  }, []);
+  const handleBlur = (0, import_react8.useCallback)(
+    (fieldName) => {
+      setFieldTouched(fieldName, true);
+      if (validateOnBlur) {
+        const res = (0, import_core5.validateFields)(fields, data);
+        setErrors(res.errors);
+      }
+    },
+    [fields, data, validateOnBlur, setFieldTouched]
+  );
+  const reset = (0, import_react8.useCallback)(
+    (newValues) => {
+      const seed = newValues ?? initialValues;
+      const next = (0, import_core5.applyComputedValues)(fields, seed);
+      setData(next);
+      setErrors({});
+      setIsDirty(false);
+      setTouched({});
+      setIsSubmitting(false);
+      setIsSubmitted(false);
+    },
+    [fields, initialValues]
+  );
+  const handleSubmit = (0, import_react8.useCallback)(
+    (onValid, onInvalid) => async (e) => {
+      if (e && typeof e.preventDefault === "function") {
+        e.preventDefault();
+      }
+      setIsSubmitting(true);
+      try {
+        const res = (0, import_core5.validateFields)(fields, data);
+        setErrors(res.errors);
+        setIsSubmitted(true);
+        if (res.valid) {
+          await onValid(data);
+        } else if (onInvalid) {
+          onInvalid(res.errors);
+        }
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [fields, data]
+  );
+  const isValid = Object.keys(errors).length === 0;
+  return {
+    data,
+    errors,
+    isValid,
+    isDirty,
+    isSubmitting,
+    isSubmitted,
+    touched,
+    setData,
+    setFieldValue,
+    setFieldTouched,
+    handleChange,
+    handleBlur,
+    reset,
+    validate,
+    handleSubmit
+  };
+}
+
+// src/index.ts
 var import_core6 = require("@dynamic-field-kit/core");
+var import_core7 = require("@dynamic-field-kit/core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DynamicFormDevTools,
   DynamicInput,
   FieldInput,
   FieldRegistry,
   FieldRegistryProvider,
   MultiFieldInput,
+  defaultRenderersMap,
   fieldRegistry,
+  getDefaultRenderer,
   layoutRegistry,
   resolveDisabled,
   resolveOptions,
   resolveReadOnly,
+  useDynamicForm,
   useFieldRegistry,
   validateField,
   validateFieldAsync,
@@ -522,4 +1142,3 @@ var import_core6 = require("@dynamic-field-kit/core");
   validateFieldsAsync,
   validators
 });
-//# sourceMappingURL=index.js.map