@dynamic-field-kit/react 1.3.0 → 1.5.0

package/dist/index.mjs

@@ -61,17 +61,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] = useState(() => checkIsMobile(breakpoint));
   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) {
@@ -92,7 +111,311 @@ layoutRegistry.register("responsive", ({ children, config }) => {
 });
 
 // src/components/DynamicInput.tsx
-import React2, { useMemo } from "react";
+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";
 
 // src/fieldRegistry.ts
 import {
@@ -100,43 +423,85 @@ import {
 } from "@dynamic-field-kit/core";
 var fieldRegistry = coreFieldRegistry;
 
+// src/FieldRegistryContext.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var FieldRegistryContext = createContext(fieldRegistry);
+var FieldRegistryProvider = ({
+  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,
   onChange,
+  onBlur,
   label,
   options,
   className,
-  description
+  description,
+  disabled,
+  readOnly,
+  required,
+  touched,
+  dirty,
+  error,
+  id,
+  ariaInvalid,
+  ariaDescribedBy,
+  ariaRequired,
+  extraProps
 }) => {
+  const registry = useFieldRegistry();
   const Renderer = useMemo(
-    () => fieldRegistry.get(type),
-    [type]
+    () => registry.get(type) || getDefaultRenderer(type),
+    [registry, type]
   );
   if (!Renderer) {
-    return /* @__PURE__ */ jsxs2("div", { children: [
+    return /* @__PURE__ */ jsxs3("div", { children: [
       "Unknown field type: ",
       type
     ] });
   }
-  return React2.createElement(Renderer, {
+  return React3.createElement(Renderer, {
+    ...extraProps,
     value,
     onValueChange: onChange,
+    onBlur,
     label,
     options,
     className,
-    description
+    description,
+    disabled,
+    readOnly,
+    required,
+    touched,
+    dirty,
+    error,
+    id,
+    ariaInvalid,
+    ariaDescribedBy,
+    ariaRequired
   });
 };
-var DynamicInput = React2.memo(
+var DynamicInput = /* @__PURE__ */ React3.memo(
   DynamicInputInner
 );
 var DynamicInput_default = DynamicInput;
 
 // src/components/FieldInput.tsx
-import React5, { useCallback as useCallback3 } from "react";
+import {
+  resolveDisabled,
+  resolveOptions,
+  resolveReadOnly,
+  validateField
+} from "@dynamic-field-kit/core";
+import React6, { useCallback as useCallback3 } from "react";
 
 // src/components/FieldGroupInput.tsx
 import {
@@ -148,7 +513,8 @@ import { useCallback as useCallback2 } from "react";
 
 // src/components/MultiFieldInput.tsx
 import {
-  applyComputedValues
+  applyComputedValues,
+  validateFields
 } from "@dynamic-field-kit/core";
 import {
   useCallback,
@@ -157,7 +523,7 @@ import {
   useRef,
   useState as useState2
 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function resolveLayout(layout) {
   if (!layout) {
     return { type: "column", config: {} };
@@ -171,19 +537,27 @@ var MultiFieldInput = ({
   fieldDescriptions,
   properties,
   onChange,
-  layout
+  layout,
+  rootData,
+  onValidityChange,
+  onBlurField
 }) => {
   const [data, setData] = useState2({});
+  const [touchedFields, setTouchedFields] = useState2(
+    {}
+  );
+  const initialPropertiesRef = useRef(properties ?? {});
   useEffect2(() => {
     if (properties) {
-      setData(applyComputedValues(fieldDescriptions, properties));
+      setData(applyComputedValues(fieldDescriptions, properties, rootData));
     }
   }, [properties]);
+  const effectiveRoot = rootData ?? data;
   const visibleFields = useMemo2(
     () => fieldDescriptions.filter(
-      (f) => !f.appearCondition || f.appearCondition(data)
+      (f) => !f.appearCondition || f.appearCondition(data, effectiveRoot)
     ),
-    [fieldDescriptions, data]
+    [fieldDescriptions, data, effectiveRoot]
   );
   const dataRef = useRef(data);
   dataRef.current = data;
@@ -191,25 +565,46 @@ var MultiFieldInput = ({
   onChangeRef.current = onChange;
   const fieldDescriptionsRef = useRef(fieldDescriptions);
   fieldDescriptionsRef.current = fieldDescriptions;
+  const rootDataRef = useRef(rootData);
+  rootDataRef.current = rootData;
+  const onValidityChangeRef = useRef(onValidityChange);
+  onValidityChangeRef.current = onValidityChange;
+  const onBlurFieldRef = useRef(onBlurField);
+  onBlurFieldRef.current = onBlurField;
+  useEffect2(() => {
+    onValidityChangeRef.current?.(
+      validateFields(fieldDescriptions, data, rootData)
+    );
+  }, [data, fieldDescriptions, rootData]);
   const handleValueChangeField = useCallback((value, key) => {
-    const next = applyComputedValues(fieldDescriptionsRef.current, {
-      ...dataRef.current,
-      [key]: value
-    });
+    const merged = { ...dataRef.current, [key]: value };
+    const next = applyComputedValues(
+      fieldDescriptionsRef.current,
+      merged,
+      rootDataRef.current
+    );
     dataRef.current = next;
     setData(next);
     onChangeRef.current?.(next);
   }, []);
+  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__ */ jsx3(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx5(
     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
@@ -218,9 +613,24 @@ var MultiFieldInput = ({
 var MultiFieldInput_default = MultiFieldInput;
 
 // src/components/FieldGroupInput.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var FieldGroupInput = ({ fieldDescription, items, onChange }) => {
-  const { fields = [], label, addLabel, removeLabel } = fieldDescription;
+import { jsx as jsx6, jsxs as jsxs4 } from "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 = useCallback2(
     (index, next) => {
       const nextItems = items.slice();
@@ -244,41 +654,44 @@ var FieldGroupInput = ({ fieldDescription, items, onChange }) => {
     },
     [fieldDescription, items, onChange]
   );
-  return /* @__PURE__ */ jsxs3("div", { className: fieldDescription.className, children: [
-    label && /* @__PURE__ */ jsx4("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__ */ jsx4("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx6("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx6(
             MultiFieldInput_default,
             {
               fieldDescriptions: fields,
               properties: item,
+              rootData,
               onChange: (next) => handleItemChange(index, next)
             }
           ) }),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
+              "aria-label": `${removeText} ${groupName} ${index + 1}`,
               onClick: () => handleRemove(index),
               disabled: !canRemoveGroupItem(fieldDescription, items),
-              children: removeLabel ?? "Remove"
+              children: removeText
             }
           )
         ]
       },
-      index
+      itemKey(item, index)
     )),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
+        "aria-label": `${addText} ${groupName}`,
         onClick: handleAdd,
         disabled: !canAddGroupItem(fieldDescription, items),
-        children: addLabel ?? "Add"
+        children: addText
       }
     )
   ] });
@@ -286,51 +699,422 @@ var FieldGroupInput = ({ fieldDescription, items, onChange }) => {
 var FieldGroupInput_default = FieldGroupInput;
 
 // src/components/FieldInput.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var FieldInputInner = ({
   fieldDescription,
   renderInfos,
+  rootData,
+  touched,
+  dirty,
+  onBlurField,
   onValueChangeField
 }) => {
-  const { name, type, label, options, className, description, fields } = fieldDescription;
+  const { name, type, label, className, description, props, fields, required } = fieldDescription;
   const handleChange = useCallback3(
     (v) => onValueChangeField(v, name),
     [onValueChangeField, name]
   );
+  const handleBlur = useCallback3(
+    () => onBlurField?.(name),
+    [onBlurField, name]
+  );
   if (fields) {
     const items = Array.isArray(renderInfos[name]) ? renderInfos[name] : [];
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx7(
       FieldGroupInput_default,
       {
         fieldDescription,
         items,
+        rootData,
         onChange: handleChange
       }
     );
   }
-  return /* @__PURE__ */ jsx5(
+  const effectiveDisabled = resolveDisabled(
+    fieldDescription,
+    renderInfos,
+    rootData
+  );
+  const readOnly = resolveReadOnly(fieldDescription, renderInfos, rootData);
+  const resolvedOptionsList = resolveOptions(
+    fieldDescription,
+    renderInfos,
+    rootData
+  );
+  const errors = effectiveDisabled ? [] : validateField(fieldDescription, renderInfos[name], renderInfos, rootData);
+  const error = errors.length > 0 ? errors : void 0;
+  const fieldId = `dfk-field-${name}`;
+  return /* @__PURE__ */ jsx7(
     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 = React5.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.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
+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 validateFields3,
+  validateFieldsAsync,
+  resolveDisabled as resolveDisabled2,
+  resolveReadOnly as resolveReadOnly2,
+  resolveOptions as resolveOptions2,
+  validators
+} from "@dynamic-field-kit/core";
 export {
+  DynamicFormDevTools,
   DynamicInput_default as DynamicInput,
   FieldInput_default as FieldInput,
+  FieldRegistry,
+  FieldRegistryProvider,
   MultiFieldInput_default as MultiFieldInput,
+  defaultRenderersMap,
   fieldRegistry,
-  layoutRegistry
+  getDefaultRenderer,
+  layoutRegistry,
+  resolveDisabled2 as resolveDisabled,
+  resolveOptions2 as resolveOptions,
+  resolveReadOnly2 as resolveReadOnly,
+  useDynamicForm,
+  useFieldRegistry,
+  validateField2 as validateField,
+  validateFieldAsync,
+  validateFields3 as validateFields,
+  validateFieldsAsync,
+  validators
 };
-//# sourceMappingURL=index.mjs.map