react-f0rm 0.2.2 → 0.3.0

package/dist/devtools/index.mjs

@@ -0,0 +1,717 @@
+import * as React from 'react';
+import React__default, { useCallback, useRef, createContext, useState, useContext, useId } from 'react';
+import { o as on, g as getDirtyFields, a as getTouchedFields, b as getValues, c as getErrors, r as reset, t as trigger } from '../form-94c70b4b.mjs';
+
+var shim = {exports: {}};
+
+var useSyncExternalStoreShim_production = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_production;
+
+function requireUseSyncExternalStoreShim_production () {
+	if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
+	hasRequiredUseSyncExternalStoreShim_production = 1;
+	var React = React__default;
+	function is(x, y) {
+	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+	}
+	var objectIs = "function" === typeof Object.is ? Object.is : is,
+	  useState = React.useState,
+	  useEffect = React.useEffect,
+	  useLayoutEffect = React.useLayoutEffect,
+	  useDebugValue = React.useDebugValue;
+	function useSyncExternalStore$2(subscribe, getSnapshot) {
+	  var value = getSnapshot(),
+	    _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
+	    inst = _useState[0].inst,
+	    forceUpdate = _useState[1];
+	  useLayoutEffect(
+	    function () {
+	      inst.value = value;
+	      inst.getSnapshot = getSnapshot;
+	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	    },
+	    [subscribe, value, getSnapshot]
+	  );
+	  useEffect(
+	    function () {
+	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	      return subscribe(function () {
+	        checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	      });
+	    },
+	    [subscribe]
+	  );
+	  useDebugValue(value);
+	  return value;
+	}
+	function checkIfSnapshotChanged(inst) {
+	  var latestGetSnapshot = inst.getSnapshot;
+	  inst = inst.value;
+	  try {
+	    var nextValue = latestGetSnapshot();
+	    return !objectIs(inst, nextValue);
+	  } catch (error) {
+	    return !0;
+	  }
+	}
+	function useSyncExternalStore$1(subscribe, getSnapshot) {
+	  return getSnapshot();
+	}
+	var shim =
+	  "undefined" === typeof window ||
+	  "undefined" === typeof window.document ||
+	  "undefined" === typeof window.document.createElement
+	    ? useSyncExternalStore$1
+	    : useSyncExternalStore$2;
+	useSyncExternalStoreShim_production.useSyncExternalStore =
+	  void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+	return useSyncExternalStoreShim_production;
+}
+
+var useSyncExternalStoreShim_development = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_development;
+
+function requireUseSyncExternalStoreShim_development () {
+	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
+	hasRequiredUseSyncExternalStoreShim_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function is(x, y) {
+	      return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+	    }
+	    function useSyncExternalStore$2(subscribe, getSnapshot) {
+	      didWarnOld18Alpha ||
+	        void 0 === React.startTransition ||
+	        ((didWarnOld18Alpha = !0),
+	        console.error(
+	          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+	        ));
+	      var value = getSnapshot();
+	      if (!didWarnUncachedGetSnapshot) {
+	        var cachedValue = getSnapshot();
+	        objectIs(value, cachedValue) ||
+	          (console.error(
+	            "The result of getSnapshot should be cached to avoid an infinite loop"
+	          ),
+	          (didWarnUncachedGetSnapshot = !0));
+	      }
+	      cachedValue = useState({
+	        inst: { value: value, getSnapshot: getSnapshot }
+	      });
+	      var inst = cachedValue[0].inst,
+	        forceUpdate = cachedValue[1];
+	      useLayoutEffect(
+	        function () {
+	          inst.value = value;
+	          inst.getSnapshot = getSnapshot;
+	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	        },
+	        [subscribe, value, getSnapshot]
+	      );
+	      useEffect(
+	        function () {
+	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	          return subscribe(function () {
+	            checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	          });
+	        },
+	        [subscribe]
+	      );
+	      useDebugValue(value);
+	      return value;
+	    }
+	    function checkIfSnapshotChanged(inst) {
+	      var latestGetSnapshot = inst.getSnapshot;
+	      inst = inst.value;
+	      try {
+	        var nextValue = latestGetSnapshot();
+	        return !objectIs(inst, nextValue);
+	      } catch (error) {
+	        return !0;
+	      }
+	    }
+	    function useSyncExternalStore$1(subscribe, getSnapshot) {
+	      return getSnapshot();
+	    }
+	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+	      "function" ===
+	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
+	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+	    var React = React__default,
+	      objectIs = "function" === typeof Object.is ? Object.is : is,
+	      useState = React.useState,
+	      useEffect = React.useEffect,
+	      useLayoutEffect = React.useLayoutEffect,
+	      useDebugValue = React.useDebugValue,
+	      didWarnOld18Alpha = !1,
+	      didWarnUncachedGetSnapshot = !1,
+	      shim =
+	        "undefined" === typeof window ||
+	        "undefined" === typeof window.document ||
+	        "undefined" === typeof window.document.createElement
+	          ? useSyncExternalStore$1
+	          : useSyncExternalStore$2;
+	    useSyncExternalStoreShim_development.useSyncExternalStore =
+	      void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+	      "function" ===
+	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
+	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+	  })();
+	return useSyncExternalStoreShim_development;
+}
+
+if (process.env.NODE_ENV === 'production') {
+  shim.exports = requireUseSyncExternalStoreShim_production();
+} else {
+  shim.exports = requireUseSyncExternalStoreShim_development();
+}
+
+var shimExports = shim.exports;
+
+function useWatchCore(subscribeFactory, getter) {
+  const cacheRef = useRef(null);
+  if (cacheRef.current === null) cacheRef.current = { hasValue: false };
+  const cache = cacheRef.current;
+  const getterRef = useRef(getter);
+  getterRef.current = getter;
+  const getSnapshot = useCallback(() => {
+    if (!cache.hasValue) {
+      cache.value = getterRef.current();
+      cache.hasValue = true;
+    }
+    return cache.value;
+  }, [cache]);
+  const subscribe = useCallback(
+    (notify) => {
+      cache.hasValue = false;
+      const invalidate = () => {
+        cache.hasValue = false;
+        notify();
+      };
+      return subscribeFactory(invalidate);
+    },
+    [subscribeFactory, cache]
+  );
+  return shimExports.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useWatch(emitter, event, getter) {
+  const subscribeFactory = useCallback(
+    (invalidate) => on(emitter, event, invalidate),
+    [emitter, event]
+  );
+  return useWatchCore(subscribeFactory, getter);
+}
+function useDirtyFields(form) {
+  return useWatch(form.emitter, "change", getDirtyFields.bind(null, form));
+}
+function useTouchedFields(form) {
+  return useWatch(form.emitter, "touched", getTouchedFields.bind(null, form));
+}
+function useIsSubmitting(form) {
+  return useWatch(form.emitter, "submitting", () => form.isSubmitting);
+}
+function useSubmitCount(form) {
+  return useWatch(form.emitter, "submitCount", () => form.submitCount);
+}
+
+const FormContext = createContext(null);
+FormContext.Provider;
+const CheckboxGroupContext = createContext(null);
+CheckboxGroupContext.Provider;
+
+const DEFAULT_OPEN_DEPTH = 1;
+function JsonNode({ name, value, depth = 0 }) {
+  const [open, setOpen] = useState(depth <= DEFAULT_OPEN_DEPTH);
+  const label = name === void 0 ? null : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-key" }, String(name)), /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-punct" }, ": "));
+  if (value !== null && typeof value === "object") {
+    const isArray = Array.isArray(value);
+    const entries = isArray ? value.map((v, i) => [i, v]) : Object.entries(value);
+    const openBracket = isArray ? "[" : "{";
+    const closeBracket = isArray ? "]" : "}";
+    const summary = open ? "" : `${openBracket}\u2026${closeBracket} ${entries.length}`;
+    return /* @__PURE__ */ React.createElement("div", { className: "rf0-dt-row", style: { paddingLeft: depth * 12 } }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rf0-dt-node-toggle",
+        "aria-expanded": open,
+        onClick: () => setOpen(!open)
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-caret" }, open ? "\u25BE" : "\u25B8"),
+      label,
+      /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-punct" }, open ? openBracket : summary)
+    ), open && /* @__PURE__ */ React.createElement(React.Fragment, null, entries.map(([k, v]) => /* @__PURE__ */ React.createElement(JsonNode, { key: String(k), name: k, value: v, depth: depth + 1 })), /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-punct", style: { paddingLeft: depth * 12 } }, closeBracket)));
+  }
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: "rf0-dt-row",
+      style: { paddingLeft: depth * 12, display: "block" }
+    },
+    label,
+    /* @__PURE__ */ React.createElement(Primitive, { value })
+  );
+}
+function Primitive({ value }) {
+  if (value === void 0)
+    return /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-null" }, "undefined");
+  if (value === null) return /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-null" }, "null");
+  if (typeof value === "string")
+    return /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-string" }, '"', value, '"');
+  if (typeof value === "boolean")
+    return /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-boolean" }, String(value));
+  return /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-number" }, String(value));
+}
+
+const CSS = `
+.rf0-dt {
+  position: fixed;
+  z-index: 2147483000;
+  box-sizing: border-box;
+  width: 308px;
+  max-width: calc(100vw - 16px);
+  max-height: min(70vh, 560px);
+  display: flex;
+  flex-direction: column;
+  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono',
+    Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: 11px;
+  line-height: 1.45;
+  color: #c7d0dc;
+  background: #0c1017;
+  border: 1px solid #1f2735;
+  border-radius: 4px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
+}
+.rf0-dt *,
+.rf0-dt-badge * {
+  box-sizing: border-box;
+}
+.rf0-dt--top-right { top: 8px; right: 8px; }
+.rf0-dt--bottom-right { bottom: 8px; right: 8px; }
+.rf0-dt--top-left { top: 8px; left: 8px; }
+.rf0-dt--bottom-left { bottom: 8px; left: 8px; }
+
+/* ---- header -------------------------------------------------------- */
+.rf0-dt-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 6px 5px 9px;
+  border-bottom: 1px solid #1f2735;
+  background: #10151e;
+}
+.rf0-dt-title {
+  flex: 1;
+  min-width: 0;
+  color: #8b96a5;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rf0-dt-title::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: #e2b93b;
+  vertical-align: 1px;
+}
+.rf0-dt-headerbtn {
+  border: 1px solid transparent;
+  border-radius: 3px;
+  padding: 1px 5px;
+  color: #8b96a5;
+  background: transparent;
+  font: inherit;
+  font-size: 10px;
+  cursor: pointer;
+}
+.rf0-dt-headerbtn:hover { color: #dce3ec; border-color: #2a3547; }
+.rf0-dt-headerbtn:focus-visible,
+.rf0-dt-tab:focus-visible,
+.rf0-dt-action:focus-visible,
+.rf0-dt-badge:focus-visible,
+.rf0-dt-node-toggle:focus-visible {
+  outline: 1px solid #e2b93b;
+  outline-offset: 1px;
+}
+
+/* ---- tabs ---------------------------------------------------------- */
+.rf0-dt-tablist {
+  display: flex;
+  border-bottom: 1px solid #1f2735;
+  background: #0e131b;
+}
+.rf0-dt-tab {
+  flex: 1;
+  padding: 4px 2px 5px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: #6b7686;
+  font: inherit;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.rf0-dt-tab:hover { color: #aab5c4; }
+.rf0-dt-tab[aria-selected='true'] {
+  color: #e7edf4;
+  border-bottom-color: #e2b93b;
+}
+.rf0-dt-tab-count {
+  margin-left: 3px;
+  color: inherit;
+  opacity: 0.75;
+}
+.rf0-dt-tab--danger[aria-selected='true'] {
+  border-bottom-color: #f0647c;
+}
+
+/* ---- panels -------------------------------------------------------- */
+.rf0-dt-panel {
+  flex: 1;
+  min-height: 84px;
+  overflow: auto;
+  padding: 6px 8px;
+  scrollbar-width: thin;
+  scrollbar-color: #2a3547 transparent;
+}
+.rf0-dt-empty {
+  padding: 10px 2px;
+  color: #4d5766;
+  font-style: italic;
+}
+
+/* json tree */
+.rf0-dt-row {
+  display: block;
+  white-space: pre;
+  tab-size: 2;
+}
+.rf0-dt-node-toggle {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  white-space: pre;
+}
+.rf0-dt-node-toggle:hover .rf0-dt-key { color: #dce3ec; }
+.rf0-dt-caret {
+  display: inline-block;
+  width: 1.2em;
+  color: #4d5766;
+}
+.rf0-dt-key { color: #8b96a5; }
+.rf0-dt-punct { color: #4d5766; }
+.rf0-dt-string { color: #8fd68a; }
+.rf0-dt-number { color: #e2b93b; }
+.rf0-dt-boolean { color: #6fb3d9; }
+.rf0-dt-null { color: #55607080; font-style: italic; }
+
+/* errors / touched / dirty lists */
+.rf0-dt-item {
+  padding: 3px 2px;
+  border-bottom: 1px dotted #1a2230;
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
+.rf0-dt-item:last-child { border-bottom: 0; }
+.rf0-dt-item-path {
+  color: #aab5c4;
+  word-break: break-all;
+}
+.rf0-dt-item-msg {
+  color: #f0647c;
+  word-break: break-word;
+}
+.rf0-dt-item-msg--ok { color: #8fd68a; }
+.rf0-dt-item-tag {
+  flex: none;
+  color: #4d5766;
+  font-size: 10px;
+}
+.rf0-dt-item--touched .rf0-dt-item-path { color: #6fb3d9; }
+.rf0-dt-item--dirty .rf0-dt-item-path { color: #e2b93b; }
+
+/* ---- submit status + actions --------------------------------------- */
+.rf0-dt-status {
+  display: flex;
+  gap: 10px;
+  padding: 4px 9px;
+  border-top: 1px solid #1f2735;
+  background: #10151e;
+  color: #6b7686;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.rf0-dt-status b { color: #aab5c4; font-weight: 400; }
+.rf0-dt-status .rf0-dt-on { color: #e2b93b; }
+.rf0-dt-status .rf0-dt-ok { color: #8fd68a; }
+.rf0-dt-status .rf0-dt-err { color: #f0647c; }
+.rf0-dt-actions {
+  display: flex;
+  gap: 6px;
+  padding: 6px 8px;
+  border-top: 1px solid #1f2735;
+  background: #10151e;
+}
+.rf0-dt-action {
+  flex: 1;
+  padding: 3px 0;
+  border: 1px solid #2a3547;
+  border-radius: 3px;
+  background: #151b26;
+  color: #c7d0dc;
+  font: inherit;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+.rf0-dt-action:hover { border-color: #3b4a61; background: #1a2230; color: #e7edf4; }
+.rf0-dt-action:active { transform: translateY(1px); }
+
+/* ---- collapsed badge ----------------------------------------------- */
+.rf0-dt-badge {
+  position: fixed;
+  z-index: 2147483000;
+  width: 26px;
+  height: 26px;
+  border: 1px solid #2a3547;
+  border-radius: 50%;
+  background: #0c1017;
+  color: #e2b93b;
+  font: inherit;
+  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono',
+    Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
+}
+.rf0-dt-badge:hover { border-color: #e2b93b; }
+.rf0-dt-badge--top-right { top: 10px; right: 10px; }
+.rf0-dt-badge--bottom-right { bottom: 10px; right: 10px; }
+.rf0-dt-badge--top-left { top: 10px; left: 10px; }
+.rf0-dt-badge--bottom-left { bottom: 10px; left: 10px; }
+.rf0-dt-badge .rf0-dt-dot {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #f0647c;
+  display: none;
+}
+.rf0-dt-badge--has-errors .rf0-dt-dot { display: block; }
+`;
+const STYLE_ID = "react-f0rm-devtools-style";
+function injectDevtoolsStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+}
+injectDevtoolsStyles();
+
+const TABS = ["values", "errors", "touched", "dirty"];
+function submitStatusClass(isSubmitSuccessful) {
+  if (isSubmitSuccessful === void 0) return void 0;
+  return isSubmitSuccessful ? "rf0-dt-ok" : "rf0-dt-err";
+}
+function countLeaves(value) {
+  if (value === null || typeof value !== "object") return 1;
+  let count = 0;
+  for (const v of Object.values(value)) {
+    count += countLeaves(v);
+  }
+  return count;
+}
+function Devtools({
+  form,
+  position = "top-right"
+}) {
+  const contextForm = useContext(FormContext);
+  const f = form ?? contextForm;
+  if (!f) {
+    throw new Error(
+      "<Devtools> needs a form: pass the `form` prop or render it inside a <Form> / FormProvider."
+    );
+  }
+  const [open, setOpen] = useState(true);
+  const [tab, setTab] = useState("values");
+  const idPrefix = useId().replace(/[^a-zA-Z0-9-]/g, "");
+  const values = useWatch(f.emitter, "change", getValues.bind(null, f));
+  const errors = useWatch(
+    f.emitter,
+    "errors",
+    getErrors.bind(null, f)
+  );
+  const touched = useTouchedFields(f);
+  const dirty = useDirtyFields(f);
+  const isSubmitting = useIsSubmitting(f);
+  const submitCount = useSubmitCount(f);
+  const isSubmitSuccessful = useWatch(
+    f.emitter,
+    "submitSuccessful",
+    () => f.isSubmitSuccessful
+  );
+  if (!open) {
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: `rf0-dt-badge rf0-dt-badge--${position}${errors.length > 0 ? " rf0-dt-badge--has-errors" : ""}`,
+        "aria-expanded": false,
+        "aria-label": `Open react-f0rm devtools (${errors.length} errors)`,
+        onClick: () => setOpen(true)
+      },
+      "f0",
+      /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-dot" })
+    );
+  }
+  const counts = {
+    values: countLeaves(values),
+    errors: errors.length,
+    touched: touched.length,
+    dirty: Object.keys(dirty).length
+  };
+  const onTabKeyDown = (e) => {
+    const deltas = {
+      ArrowRight: 1,
+      ArrowLeft: -1
+    };
+    const delta = deltas[e.key];
+    if (!delta) return;
+    e.preventDefault();
+    const next = TABS[(TABS.indexOf(tab) + delta + TABS.length) % TABS.length];
+    setTab(next);
+    document.getElementById(`${idPrefix}-tab-${next}`)?.focus();
+  };
+  return /* @__PURE__ */ React.createElement(
+    "section",
+    {
+      className: `rf0-dt rf0-dt--${position}`,
+      "aria-label": "react-f0rm devtools"
+    },
+    /* @__PURE__ */ React.createElement("header", { className: "rf0-dt-header" }, /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-title" }, "react-f0rm"), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rf0-dt-headerbtn",
+        "aria-label": "Collapse devtools",
+        onClick: () => setOpen(false)
+      },
+      "\u2013"
+    )),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "rf0-dt-tablist",
+        role: "tablist",
+        "aria-label": "Form state",
+        tabIndex: -1,
+        onKeyDown: onTabKeyDown
+      },
+      TABS.map((id) => /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: id,
+          id: `${idPrefix}-tab-${id}`,
+          type: "button",
+          role: "tab",
+          className: `rf0-dt-tab${id === "errors" ? " rf0-dt-tab--danger" : ""}`,
+          "aria-selected": tab === id,
+          "aria-controls": `${idPrefix}-panel-${id}`,
+          tabIndex: tab === id ? 0 : -1,
+          onClick: () => setTab(id)
+        },
+        id,
+        /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-tab-count" }, counts[id])
+      ))
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        id: `${idPrefix}-panel-${tab}`,
+        role: "tabpanel",
+        "aria-labelledby": `${idPrefix}-tab-${tab}`,
+        className: "rf0-dt-panel"
+      },
+      tab === "values" && /* @__PURE__ */ React.createElement(JsonNode, { value: values }),
+      tab === "errors" && (errors.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "rf0-dt-empty" }, "no errors") : errors.map(({ path, type, message }, index) => (
+        // Same path can hold several errors now; index keeps keys
+        // unique without changing what is rendered (messages may
+        // legitimately repeat for one path).
+        // eslint-disable-next-line react/no-array-index-key
+        /* @__PURE__ */ React.createElement("div", { key: `${path}:${index}`, className: "rf0-dt-item" }, /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-item-path" }, path), /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-item-msg" }, message), /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-item-tag" }, type))
+      ))),
+      tab === "touched" && (touched.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "rf0-dt-empty" }, "no touched fields") : touched.map((path) => /* @__PURE__ */ React.createElement("div", { key: path, className: "rf0-dt-item rf0-dt-item--touched" }, /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-item-path" }, path)))),
+      tab === "dirty" && (Object.keys(dirty).length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "rf0-dt-empty" }, "no dirty fields") : Object.keys(dirty).map((path) => /* @__PURE__ */ React.createElement("div", { key: path, className: "rf0-dt-item rf0-dt-item--dirty" }, /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-item-path" }, path), /* @__PURE__ */ React.createElement("span", { className: "rf0-dt-item-msg rf0-dt-item-msg--ok" }, "changed"))))
+    ),
+    /* @__PURE__ */ React.createElement("p", { className: "rf0-dt-status", "aria-live": "polite" }, /* @__PURE__ */ React.createElement("span", { className: isSubmitting ? "rf0-dt-on" : void 0 }, "submitting ", /* @__PURE__ */ React.createElement("b", null, String(isSubmitting))), /* @__PURE__ */ React.createElement("span", null, "submits ", /* @__PURE__ */ React.createElement("b", null, submitCount)), /* @__PURE__ */ React.createElement("span", { className: submitStatusClass(isSubmitSuccessful) }, "ok", " ", /* @__PURE__ */ React.createElement("b", null, isSubmitSuccessful === void 0 ? "\u2013" : String(isSubmitSuccessful)))),
+    /* @__PURE__ */ React.createElement("div", { className: "rf0-dt-actions" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rf0-dt-action",
+        onClick: () => reset(f, f.initialValues)
+      },
+      "Reset"
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rf0-dt-action",
+        onClick: () => trigger(f)
+      },
+      "Validate"
+    ))
+  );
+}
+
+export { Devtools };
+//# sourceMappingURL=index.mjs.map