@dynamic-field-kit/react 1.3.0 → 1.5.0

package/dist/index.js

@@ -30,11 +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_core6.FieldRegistry,
+  FieldRegistryProvider: () => FieldRegistryProvider,
   MultiFieldInput: () => MultiFieldInput_default,
+  defaultRenderersMap: () => defaultRenderersMap,
   fieldRegistry: () => fieldRegistry,
-  layoutRegistry: () => layoutRegistry
+  getDefaultRenderer: () => getDefaultRenderer,
+  layoutRegistry: () => layoutRegistry,
+  resolveDisabled: () => import_core7.resolveDisabled,
+  resolveOptions: () => import_core7.resolveOptions,
+  resolveReadOnly: () => import_core7.resolveReadOnly,
+  useDynamicForm: () => useDynamicForm,
+  useFieldRegistry: () => useFieldRegistry,
+  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);
 
@@ -101,17 +116,36 @@ function resolve(layout) {
   return { type: layout.type, config: layout };
 }
 function checkIsMobile(breakpoint) {
-  return typeof window !== "undefined" && window.innerWidth < breakpoint;
+  if (typeof window === "undefined") {
+    return false;
+  }
+  if (typeof window.matchMedia === "function") {
+    return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;
+  }
+  return window.innerWidth < breakpoint;
 }
 layoutRegistry.register("responsive", ({ children, config }) => {
   const responsiveConfig = config;
   const breakpoint = responsiveConfig.breakpoint ?? 768;
   const [isMobile, setIsMobile] = (0, import_react.useState)(() => checkIsMobile(breakpoint));
   (0, import_react.useEffect)(() => {
-    const handleResize = () => setIsMobile(checkIsMobile(breakpoint));
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
+    if (typeof window === "undefined") {
+      return;
+    }
+    if (typeof window.matchMedia !== "function") {
+      const handleResize = () => setIsMobile(checkIsMobile(breakpoint));
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+    const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const handleChange = (e) => setIsMobile(e.matches);
+    setIsMobile(mediaQuery.matches);
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    mediaQuery.addListener(handleChange);
+    return () => mediaQuery.removeListener(handleChange);
   }, [breakpoint]);
   const current = isMobile ? responsiveConfig.mobile : responsiveConfig.desktop;
   if (!current) {
@@ -132,58 +166,399 @@ layoutRegistry.register("responsive", ({ children, config }) => {
 });
 
 // src/components/DynamicInput.tsx
-var import_react2 = __toESM(require("react"));
+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");
 
 // src/fieldRegistry.ts
 var import_core = require("@dynamic-field-kit/core");
 var fieldRegistry = import_core.fieldRegistry;
 
+// src/FieldRegistryContext.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FieldRegistryContext = (0, import_react2.createContext)(fieldRegistry);
+var FieldRegistryProvider = ({
+  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_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var DynamicInputInner = ({
   type,
   value,
   onChange,
+  onBlur,
   label,
   options,
   className,
-  description
+  description,
+  disabled,
+  readOnly,
+  required,
+  touched,
+  dirty,
+  error,
+  id,
+  ariaInvalid,
+  ariaDescribedBy,
+  ariaRequired,
+  extraProps
 }) => {
-  const Renderer = (0, import_react2.useMemo)(
-    () => fieldRegistry.get(type),
-    [type]
+  const registry = useFieldRegistry();
+  const Renderer = (0, import_react3.useMemo)(
+    () => registry.get(type) || getDefaultRenderer(type),
+    [registry, type]
   );
   if (!Renderer) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
       "Unknown field type: ",
       type
     ] });
   }
-  return import_react2.default.createElement(Renderer, {
+  return import_react3.default.createElement(Renderer, {
+    ...extraProps,
     value,
     onValueChange: onChange,
+    onBlur,
     label,
     options,
     className,
-    description
+    description,
+    disabled,
+    readOnly,
+    required,
+    touched,
+    dirty,
+    error,
+    id,
+    ariaInvalid,
+    ariaDescribedBy,
+    ariaRequired
   });
 };
-var DynamicInput = import_react2.default.memo(
+var DynamicInput = /* @__PURE__ */ import_react3.default.memo(
   DynamicInputInner
 );
 var DynamicInput_default = DynamicInput;
 
 // src/components/FieldInput.tsx
-var import_react5 = __toESM(require("react"));
+var import_core4 = require("@dynamic-field-kit/core");
+var import_react6 = __toESM(require("react"));
 
 // src/components/FieldGroupInput.tsx
 var import_core3 = require("@dynamic-field-kit/core");
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/MultiFieldInput.tsx
 var import_core2 = require("@dynamic-field-kit/core");
-var import_react3 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function resolveLayout(layout) {
   if (!layout) {
     return { type: "column", config: {} };
@@ -197,45 +572,74 @@ var MultiFieldInput = ({
   fieldDescriptions,
   properties,
   onChange,
-  layout
+  layout,
+  rootData,
+  onValidityChange,
+  onBlurField
 }) => {
-  const [data, setData] = (0, import_react3.useState)({});
-  (0, import_react3.useEffect)(() => {
+  const [data, setData] = (0, import_react4.useState)({});
+  const [touchedFields, setTouchedFields] = (0, import_react4.useState)(
+    {}
+  );
+  const initialPropertiesRef = (0, import_react4.useRef)(properties ?? {});
+  (0, import_react4.useEffect)(() => {
     if (properties) {
-      setData((0, import_core2.applyComputedValues)(fieldDescriptions, properties));
+      setData((0, import_core2.applyComputedValues)(fieldDescriptions, properties, rootData));
     }
   }, [properties]);
-  const visibleFields = (0, import_react3.useMemo)(
+  const effectiveRoot = rootData ?? data;
+  const visibleFields = (0, import_react4.useMemo)(
     () => fieldDescriptions.filter(
-      (f) => !f.appearCondition || f.appearCondition(data)
+      (f) => !f.appearCondition || f.appearCondition(data, effectiveRoot)
     ),
-    [fieldDescriptions, data]
+    [fieldDescriptions, data, effectiveRoot]
   );
-  const dataRef = (0, import_react3.useRef)(data);
+  const dataRef = (0, import_react4.useRef)(data);
   dataRef.current = data;
-  const onChangeRef = (0, import_react3.useRef)(onChange);
+  const onChangeRef = (0, import_react4.useRef)(onChange);
   onChangeRef.current = onChange;
-  const fieldDescriptionsRef = (0, import_react3.useRef)(fieldDescriptions);
+  const fieldDescriptionsRef = (0, import_react4.useRef)(fieldDescriptions);
   fieldDescriptionsRef.current = fieldDescriptions;
-  const handleValueChangeField = (0, import_react3.useCallback)((value, key) => {
-    const next = (0, import_core2.applyComputedValues)(fieldDescriptionsRef.current, {
-      ...dataRef.current,
-      [key]: value
-    });
+  const rootDataRef = (0, import_react4.useRef)(rootData);
+  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)
+    );
+  }, [data, fieldDescriptions, rootData]);
+  const handleValueChangeField = (0, import_react4.useCallback)((value, key) => {
+    const merged = { ...dataRef.current, [key]: value };
+    const next = (0, import_core2.applyComputedValues)(
+      fieldDescriptionsRef.current,
+      merged,
+      rootDataRef.current
+    );
     dataRef.current = next;
     setData(next);
     onChangeRef.current?.(next);
   }, []);
+  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_runtime4.jsx)(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     FieldInput_default,
     {
       fieldDescription: f,
       renderInfos: data,
+      rootData: effectiveRoot,
+      touched: Boolean(touchedFields[f.name]),
+      dirty: data[f.name] !== initialPropertiesRef.current[f.name],
+      onBlurField: handleBlurField,
       onValueChangeField: handleValueChangeField
     },
     f.name
@@ -244,10 +648,25 @@ var MultiFieldInput = ({
 var MultiFieldInput_default = MultiFieldInput;
 
 // src/components/FieldGroupInput.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var FieldGroupInput = ({ fieldDescription, items, onChange }) => {
-  const { fields = [], label, addLabel, removeLabel } = fieldDescription;
-  const handleItemChange = (0, import_react4.useCallback)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FieldGroupInput = ({
+  fieldDescription,
+  items,
+  rootData,
+  onChange
+}) => {
+  const {
+    fields = [],
+    label,
+    addLabel,
+    removeLabel,
+    keyField
+  } = fieldDescription;
+  const itemKey = (item, index) => keyField ? item[keyField] ?? index : index;
+  const addText = addLabel ?? "Add";
+  const removeText = removeLabel ?? "Remove";
+  const groupName = label ?? fieldDescription.name;
+  const handleItemChange = (0, import_react5.useCallback)(
     (index, next) => {
       const nextItems = items.slice();
       nextItems[index] = next;
@@ -255,13 +674,13 @@ var FieldGroupInput = ({ fieldDescription, items, onChange }) => {
     },
     [items, onChange]
   );
-  const handleAdd = (0, import_react4.useCallback)(() => {
+  const handleAdd = (0, import_react5.useCallback)(() => {
     if (!(0, import_core3.canAddGroupItem)(fieldDescription, items)) {
       return;
     }
     onChange([...items, (0, import_core3.createGroupItem)(fieldDescription)]);
   }, [fieldDescription, items, onChange]);
-  const handleRemove = (0, import_react4.useCallback)(
+  const handleRemove = (0, import_react5.useCallback)(
     (index) => {
       if (!(0, import_core3.canRemoveGroupItem)(fieldDescription, items)) {
         return;
@@ -270,41 +689,44 @@ var FieldGroupInput = ({ fieldDescription, items, onChange }) => {
     },
     [fieldDescription, items, onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: fieldDescription.className, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: label }),
-    items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             MultiFieldInput_default,
             {
               fieldDescriptions: fields,
               properties: item,
+              rootData,
               onChange: (next) => handleItemChange(index, next)
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
+              "aria-label": `${removeText} ${groupName} ${index + 1}`,
               onClick: () => handleRemove(index),
               disabled: !(0, import_core3.canRemoveGroupItem)(fieldDescription, items),
-              children: removeLabel ?? "Remove"
+              children: removeText
             }
           )
         ]
       },
-      index
+      itemKey(item, index)
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
+        "aria-label": `${addText} ${groupName}`,
         onClick: handleAdd,
         disabled: !(0, import_core3.canAddGroupItem)(fieldDescription, items),
-        children: addLabel ?? "Add"
+        children: addText
       }
     )
   ] });
@@ -312,52 +734,411 @@ var FieldGroupInput = ({ fieldDescription, items, onChange }) => {
 var FieldGroupInput_default = FieldGroupInput;
 
 // src/components/FieldInput.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var FieldInputInner = ({
   fieldDescription,
   renderInfos,
+  rootData,
+  touched,
+  dirty,
+  onBlurField,
   onValueChangeField
 }) => {
-  const { name, type, label, options, className, description, fields } = fieldDescription;
-  const handleChange = (0, import_react5.useCallback)(
+  const { name, type, label, className, description, props, fields, required } = fieldDescription;
+  const handleChange = (0, import_react6.useCallback)(
     (v) => onValueChangeField(v, name),
     [onValueChangeField, name]
   );
+  const handleBlur = (0, import_react6.useCallback)(
+    () => onBlurField?.(name),
+    [onBlurField, name]
+  );
   if (fields) {
     const items = Array.isArray(renderInfos[name]) ? renderInfos[name] : [];
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       FieldGroupInput_default,
       {
         fieldDescription,
         items,
+        rootData,
         onChange: handleChange
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const effectiveDisabled = (0, import_core4.resolveDisabled)(
+    fieldDescription,
+    renderInfos,
+    rootData
+  );
+  const readOnly = (0, import_core4.resolveReadOnly)(fieldDescription, renderInfos, rootData);
+  const resolvedOptionsList = (0, import_core4.resolveOptions)(
+    fieldDescription,
+    renderInfos,
+    rootData
+  );
+  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_runtime8.jsx)(
     DynamicInput_default,
     {
+      id: fieldId,
       type,
       label,
       value: renderInfos[name],
-      options,
+      options: resolvedOptionsList,
       className,
       description,
-      onChange: handleChange
+      disabled: effectiveDisabled,
+      readOnly,
+      required,
+      touched,
+      dirty,
+      error,
+      ariaInvalid: Boolean(error),
+      ariaRequired: Boolean(required),
+      extraProps: props,
+      onChange: handleChange,
+      onBlur: handleBlur
     }
   );
 };
-var FieldInput = import_react5.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.renderInfos[name] === next.renderInfos[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
+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,
-  layoutRegistry
+  getDefaultRenderer,
+  layoutRegistry,
+  resolveDisabled,
+  resolveOptions,
+  resolveReadOnly,
+  useDynamicForm,
+  useFieldRegistry,
+  validateField,
+  validateFieldAsync,
+  validateFields,
+  validateFieldsAsync,
+  validators
 });
-//# sourceMappingURL=index.js.map