@dynamic-field-kit/react 1.4.0 → 1.5.0

package/dist/index.mjs

@@ -113,6 +113,307 @@ layoutRegistry.register("responsive", ({ children, config }) => {
 // src/components/DynamicInput.tsx
 import React3, { useMemo } from "react";
 
+// src/defaultRenderers.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DefaultTextRenderer = ({
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  readOnly,
+  required,
+  placeholder,
+  id,
+  className,
+  ariaInvalid,
+  ariaDescribedBy,
+  ariaRequired,
+  inputType = "text"
+}) => /* @__PURE__ */ jsx3(
+  "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__ */ jsx3(
+  "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__ */ jsx3(DefaultTextRenderer, { ...props, inputType: "password" });
+var DefaultEmailRenderer = (props) => /* @__PURE__ */ jsx3(DefaultTextRenderer, { ...props, inputType: "email" });
+var DefaultTextareaRenderer = ({
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  readOnly,
+  required,
+  placeholder,
+  id,
+  className,
+  ariaInvalid,
+  ariaDescribedBy,
+  ariaRequired
+}) => /* @__PURE__ */ jsx3(
+  "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__ */ jsx3(
+  "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__ */ jsxs2(
+  "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__ */ jsx3("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__ */ jsx3("option", { value: String(optVal), children: String(optLabel) }, String(optVal) + i);
+      })
+    ]
+  }
+);
+var DefaultRadioRenderer = ({
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  readOnly,
+  required,
+  options = [],
+  id,
+  className,
+  ariaInvalid,
+  ariaDescribedBy
+}) => /* @__PURE__ */ jsx3("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__ */ jsxs2(
+    "label",
+    {
+      htmlFor: radioId,
+      style: {
+        marginRight: "12px",
+        display: "inline-flex",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "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__ */ jsx3("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__ */ jsx3(
+  "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__ */ jsx3(
+  "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__ */ jsx3(DefaultTextRenderer, { ...props, inputType: "date" });
+var DefaultTimeRenderer = (props) => /* @__PURE__ */ jsx3(DefaultTextRenderer, { ...props, inputType: "time" });
+var DefaultDateTimeLocalRenderer = (props) => /* @__PURE__ */ jsx3(DefaultTextRenderer, { ...props, inputType: "datetime-local" });
+var DefaultSwitchRenderer = (props) => /* @__PURE__ */ jsx3(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
 import { createContext, useContext } from "react";
 
@@ -123,18 +424,18 @@ import {
 var fieldRegistry = coreFieldRegistry;
 
 // src/FieldRegistryContext.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var FieldRegistryContext = createContext(fieldRegistry);
 var FieldRegistryProvider = ({
   registry,
   children
-}) => /* @__PURE__ */ jsx3(FieldRegistryContext.Provider, { value: registry, children });
+}) => /* @__PURE__ */ jsx4(FieldRegistryContext.Provider, { value: registry, children });
 function useFieldRegistry() {
   return useContext(FieldRegistryContext);
 }
 
 // src/components/DynamicInput.tsx
-import { jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsxs as jsxs3 } from "react/jsx-runtime";
 var DynamicInputInner = ({
   type,
   value,
@@ -158,11 +459,11 @@ var DynamicInputInner = ({
 }) => {
   const registry = useFieldRegistry();
   const Renderer = useMemo(
-    () => registry.get(type),
+    () => registry.get(type) || getDefaultRenderer(type),
     [registry, type]
   );
   if (!Renderer) {
-    return /* @__PURE__ */ jsxs2("div", { children: [
+    return /* @__PURE__ */ jsxs3("div", { children: [
       "Unknown field type: ",
       type
     ] });
@@ -188,7 +489,7 @@ var DynamicInputInner = ({
     ariaRequired
   });
 };
-var DynamicInput = React3.memo(
+var DynamicInput = /* @__PURE__ */ React3.memo(
   DynamicInputInner
 );
 var DynamicInput_default = DynamicInput;
@@ -222,7 +523,7 @@ import {
   useRef,
   useState as useState2
 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function resolveLayout(layout) {
   if (!layout) {
     return { type: "column", config: {} };
@@ -238,7 +539,8 @@ var MultiFieldInput = ({
   onChange,
   layout,
   rootData,
-  onValidityChange
+  onValidityChange,
+  onBlurField
 }) => {
   const [data, setData] = useState2({});
   const [touchedFields, setTouchedFields] = useState2(
@@ -267,6 +569,8 @@ var MultiFieldInput = ({
   rootDataRef.current = rootData;
   const onValidityChangeRef = useRef(onValidityChange);
   onValidityChangeRef.current = onValidityChange;
+  const onBlurFieldRef = useRef(onBlurField);
+  onBlurFieldRef.current = onBlurField;
   useEffect2(() => {
     onValidityChangeRef.current?.(
       validateFields(fieldDescriptions, data, rootData)
@@ -285,13 +589,14 @@ var MultiFieldInput = ({
   }, []);
   const handleBlurField = 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__ */ jsx4(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx5(
     FieldInput_default,
     {
       fieldDescription: f,
@@ -308,7 +613,7 @@ var MultiFieldInput = ({
 var MultiFieldInput_default = MultiFieldInput;
 
 // src/components/FieldGroupInput.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var FieldGroupInput = ({
   fieldDescription,
   items,
@@ -349,14 +654,14 @@ var FieldGroupInput = ({
     },
     [fieldDescription, items, onChange]
   );
-  return /* @__PURE__ */ jsxs3("div", { className: fieldDescription.className, children: [
-    label && /* @__PURE__ */ jsx5("div", { children: label }),
-    items.map((item, index) => /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4("div", { className: fieldDescription.className, children: [
+    label && /* @__PURE__ */ jsx6("div", { children: label }),
+    items.map((item, index) => /* @__PURE__ */ jsxs4(
       "div",
       {
         style: { display: "flex", alignItems: "flex-start", gap: 8 },
         children: [
-          /* @__PURE__ */ jsx5("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx6(
             MultiFieldInput_default,
             {
               fieldDescriptions: fields,
@@ -365,7 +670,7 @@ var FieldGroupInput = ({
               onChange: (next) => handleItemChange(index, next)
             }
           ) }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -379,7 +684,7 @@ var FieldGroupInput = ({
       },
       itemKey(item, index)
     )),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -394,7 +699,7 @@ var FieldGroupInput = ({
 var FieldGroupInput_default = FieldGroupInput;
 
 // src/components/FieldInput.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var FieldInputInner = ({
   fieldDescription,
   renderInfos,
@@ -415,7 +720,7 @@ var FieldInputInner = ({
   );
   if (fields) {
     const items = Array.isArray(renderInfos[name]) ? renderInfos[name] : [];
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       FieldGroupInput_default,
       {
         fieldDescription,
@@ -439,7 +744,7 @@ var FieldInputInner = ({
   const errors = effectiveDisabled ? [] : validateField(fieldDescription, renderInfos[name], renderInfos, rootData);
   const error = errors.length > 0 ? errors : void 0;
   const fieldId = `dfk-field-${name}`;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     DynamicInput_default,
     {
       id: fieldId,
@@ -463,18 +768,328 @@ var FieldInputInner = ({
     }
   );
 };
-var FieldInput = React6.memo(FieldInputInner, (prev, next) => {
+var FieldInput = /* @__PURE__ */ React6.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/components/DynamicFormDevTools.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var DynamicFormDevTools = ({
+  data,
+  errors = {},
+  touched = {},
+  isDirty = false,
+  fields = [],
+  position = "bottom-right"
+}) => {
+  const [isOpen, setIsOpen] = useState3(false);
+  const [activeTab, setActiveTab] = useState3("data");
+  const errorCount = Object.keys(errors).length;
+  const posStyle = position === "bottom-left" ? { left: "16px", bottom: "16px" } : { right: "16px", bottom: "16px" };
+  if (!isOpen) {
+    return /* @__PURE__ */ jsxs5(
+      "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__ */ jsx8("span", { children: "\u{1F50D} DevTools" }),
+          errorCount > 0 && /* @__PURE__ */ jsx8(
+            "span",
+            {
+              style: {
+                background: "#ef4444",
+                color: "#fff",
+                borderRadius: "10px",
+                padding: "2px 6px",
+                fontSize: "10px"
+              },
+              children: errorCount
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5(
+    "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__ */ jsxs5(
+          "div",
+          {
+            style: {
+              padding: "10px 14px",
+              background: "#1e293b",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              borderBottom: "1px solid #334155"
+            },
+            children: [
+              /* @__PURE__ */ jsx8("span", { style: { fontWeight: "bold", color: "#38bdf8" }, children: "\u{1F6E0}\uFE0F Form DevTools" }),
+              /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setIsOpen(false),
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "#94a3b8",
+                    fontSize: "14px",
+                    cursor: "pointer"
+                  },
+                  children: "\u2715"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              display: "flex",
+              background: "#1e293b",
+              borderBottom: "1px solid #334155"
+            },
+            children: ["data", "errors", "meta", "fields"].map((tab) => /* @__PURE__ */ jsxs5(
+              "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__ */ jsxs5("div", { style: { padding: "12px", overflowY: "auto", flex: 1 }, children: [
+          activeTab === "data" && /* @__PURE__ */ jsx8(
+            "pre",
+            {
+              style: {
+                margin: 0,
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-all",
+                color: "#a7f3d0"
+              },
+              children: JSON.stringify(data, null, 2)
+            }
+          ),
+          activeTab === "errors" && /* @__PURE__ */ jsx8("div", { children: Object.keys(errors).length === 0 ? /* @__PURE__ */ jsx8("span", { style: { color: "#4ade80" }, children: "\u2713 No validation errors" }) : Object.entries(errors).map(([field, msgs]) => /* @__PURE__ */ jsxs5("div", { style: { marginBottom: "8px" }, children: [
+            /* @__PURE__ */ jsxs5("span", { style: { color: "#f87171", fontWeight: "bold" }, children: [
+              field,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx8("ul", { style: { margin: "4px 0 0 16px", padding: 0 }, children: msgs.map((m, i) => /* @__PURE__ */ jsx8("li", { style: { color: "#fca5a5" }, children: m }, i)) })
+          ] }, field)) }),
+          activeTab === "meta" && /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsxs5("div", { style: { marginBottom: "6px" }, children: [
+              /* @__PURE__ */ jsx8("span", { style: { color: "#94a3b8" }, children: "isDirty: " }),
+              /* @__PURE__ */ jsx8("span", { style: { color: isDirty ? "#facc15" : "#4ade80" }, children: String(isDirty) })
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { children: [
+              /* @__PURE__ */ jsx8("span", { style: { color: "#94a3b8" }, children: "Touched Fields:" }),
+              /* @__PURE__ */ jsx8("pre", { style: { margin: "4px 0 0 0", color: "#cbd5e1" }, children: JSON.stringify(touched, null, 2) })
+            ] })
+          ] }),
+          activeTab === "fields" && /* @__PURE__ */ jsx8("div", { children: fields.length === 0 ? /* @__PURE__ */ jsx8("span", { style: { color: "#94a3b8" }, children: "No field descriptions passed" }) : fields.map((f) => /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              style: {
+                padding: "6px",
+                marginBottom: "6px",
+                background: "#1e293b",
+                borderRadius: "4px"
+              },
+              children: [
+                /* @__PURE__ */ jsx8("div", { style: { color: "#38bdf8", fontWeight: "bold" }, children: f.name }),
+                /* @__PURE__ */ jsxs5("div", { style: { color: "#94a3b8", fontSize: "10px" }, children: [
+                  "type: ",
+                  f.type,
+                  " | required: ",
+                  String(Boolean(f.required))
+                ] })
+              ]
+            },
+            f.name
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/useDynamicForm.ts
+import {
+  applyComputedValues as applyComputedValues2,
+  validateFields as validateFields2
+} from "@dynamic-field-kit/core";
+import { useCallback as useCallback4, useState as useState4 } from "react";
+function useDynamicForm({
+  fields,
+  initialValues = {},
+  validateOnBlur = true,
+  validateOnChange = false
+}) {
+  const [data, setData] = useState4(
+    () => applyComputedValues2(fields, initialValues)
+  );
+  const [errors, setErrors] = useState4({});
+  const [isDirty, setIsDirty] = useState4(false);
+  const [touched, setTouched] = useState4({});
+  const [isSubmitting, setIsSubmitting] = useState4(false);
+  const [isSubmitted, setIsSubmitted] = useState4(false);
+  const validate = useCallback4(() => {
+    const res = validateFields2(fields, data);
+    setErrors(res.errors);
+    return res.valid;
+  }, [fields, data]);
+  const handleChange = useCallback4(
+    (newData) => {
+      const next = applyComputedValues2(fields, newData);
+      setData(next);
+      setIsDirty(true);
+      if (validateOnChange) {
+        const res = validateFields2(fields, next);
+        setErrors(res.errors);
+      }
+    },
+    [fields, validateOnChange]
+  );
+  const setFieldValue = useCallback4(
+    (name, value) => {
+      handleChange({ ...data, [name]: value });
+    },
+    [data, handleChange]
+  );
+  const setFieldTouched = useCallback4((name, isTouched = true) => {
+    setTouched((prev) => ({ ...prev, [name]: isTouched }));
+  }, []);
+  const handleBlur = useCallback4(
+    (fieldName) => {
+      setFieldTouched(fieldName, true);
+      if (validateOnBlur) {
+        const res = validateFields2(fields, data);
+        setErrors(res.errors);
+      }
+    },
+    [fields, data, validateOnBlur, setFieldTouched]
+  );
+  const reset = useCallback4(
+    (newValues) => {
+      const seed = newValues ?? initialValues;
+      const next = applyComputedValues2(fields, seed);
+      setData(next);
+      setErrors({});
+      setIsDirty(false);
+      setTouched({});
+      setIsSubmitting(false);
+      setIsSubmitted(false);
+    },
+    [fields, initialValues]
+  );
+  const handleSubmit = useCallback4(
+    (onValid, onInvalid) => async (e) => {
+      if (e && typeof e.preventDefault === "function") {
+        e.preventDefault();
+      }
+      setIsSubmitting(true);
+      try {
+        const res = validateFields2(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
 import { FieldRegistry } from "@dynamic-field-kit/core";
 import {
   validateField as validateField2,
   validateFieldAsync,
-  validateFields as validateFields2,
+  validateFields as validateFields3,
   validateFieldsAsync,
   resolveDisabled as resolveDisabled2,
   resolveReadOnly as resolveReadOnly2,
@@ -482,21 +1097,24 @@ import {
   validators
 } from "@dynamic-field-kit/core";
 export {
+  DynamicFormDevTools,
   DynamicInput_default as DynamicInput,
   FieldInput_default as FieldInput,
   FieldRegistry,
   FieldRegistryProvider,
   MultiFieldInput_default as MultiFieldInput,
+  defaultRenderersMap,
   fieldRegistry,
+  getDefaultRenderer,
   layoutRegistry,
   resolveDisabled2 as resolveDisabled,
   resolveOptions2 as resolveOptions,
   resolveReadOnly2 as resolveReadOnly,
+  useDynamicForm,
   useFieldRegistry,
   validateField2 as validateField,
   validateFieldAsync,
-  validateFields2 as validateFields,
+  validateFields3 as validateFields,
   validateFieldsAsync,
   validators
 };
-//# sourceMappingURL=index.mjs.map