@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/jsx/fields/Progress/index.mjs

@@ -1,14 +1,15 @@
 import { Intent } from "@multiplatform.one/theme";
-import { Progress as TamaguiProgress, View, XStack, styled, useTheme } from "tamagui";
-import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { getSize } from "@tamagui/get-token";
+import { Progress as TamaguiProgress, Text, View, XStack, getVariableValue, isWeb, styled, useTheme } from "tamagui";
+import { Field, FieldLayout, useFieldDescribedBy } from "../../fieldLayout.mjs";
 import { Skeleton } from "../../Skeleton/index.mjs";
 import { formControlColors } from "../../shared/colorRamps.mjs";
-import { t } from "../../shared/t.mjs";
+import { bidiIsolate, t } from "../../shared/t.mjs";
 import { getElevationWrapperProps, getFieldError, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 const ProgressFrame = styled(TamaguiProgress, {
   backgroundColor: formControlColors.background,
-  borderWidth: 0,
+  overflow: "hidden",
   variants: {
     outlined: {
       true: {
@@ -20,13 +21,139 @@ const ProgressFrame = styled(TamaguiProgress, {
 const ProgressIndicator = styled(TamaguiProgress.Indicator, {
   backgroundColor: formControlColors.border
 });
-function HueFillIndicator() {
+function trackHeightPx(size) {
+  try {
+    const raw = getVariableValue(getSize(size));
+    const n = typeof raw === "number" ? raw : Number(raw);
+    if (!Number.isFinite(n)) return 11;
+    return Math.round(n * 0.25);
+  } catch {
+    return 11;
+  }
+}
+function resolveMax(max) {
+  return typeof max === "number" && Number.isFinite(max) && max > 0 ? max : 100;
+}
+function clampProgress(value, max) {
+  const n = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(n)) return 0;
+  return Math.min(max, Math.max(0, n));
+}
+function indicatorMotion(transition) {
+  if (!transition) return {
+    transition: "none"
+  };
+  return {
+    transition
+  };
+}
+function HueFillIndicator({
+  transition
+}) {
   const theme = useTheme();
   const fill = theme.color9?.val;
   return /* @__PURE__ */jsx(ProgressIndicator, {
     ...(fill ? {
       backgroundColor: fill
-    } : void 0)
+    } : void 0),
+    ...indicatorMotion(transition)
+  });
+}
+function ProgressTrack({
+  id,
+  label,
+  progressValue,
+  max,
+  required,
+  readOnly,
+  hasError,
+  intent,
+  size,
+  sizeToken,
+  knobProps,
+  elevationWrapperProps,
+  progressProps,
+  showValue,
+  blurHandler
+}) {
+  const describedBy = useFieldDescribedBy();
+  const trackSize = size ?? sizeToken;
+  const percent = Math.round(progressValue / max * 100);
+  const motion = indicatorMotion(knobProps.transition);
+  const name = typeof label === "string" && label ? label : t("Progress");
+  const progressElement = /* @__PURE__ */jsx(ProgressFrame, {
+    width: "100%",
+    size: trackSize,
+    overflow: "hidden",
+    outlined: knobProps.outlined,
+    ...knobProps.borderRadius,
+    ...(knobProps.outlined ? knobProps.inputSurface : {
+      borderWidth: 0
+    }),
+    ...(knobProps.outlined ? {
+      borderColor: formControlColors.boundary
+    } : void 0),
+    "aria-label": name,
+    "aria-describedby": describedBy,
+    "aria-readonly": readOnly || void 0,
+    ...progressProps,
+    id,
+    value: progressValue,
+    max,
+    ...(blurHandler ? {
+      onBlur: blurHandler
+    } : void 0),
+    "aria-required": required || void 0,
+    "aria-invalid": hasError || void 0,
+    children: intent && intent !== "accent" ? /* @__PURE__ */jsx(Intent, {
+      name: intent,
+      children: /* @__PURE__ */jsx(HueFillIndicator, {
+        transition: knobProps.transition
+      })
+    }) :
+    // `accent` rides the base theme's `$accentBackground` — the exact
+    // fill the bespoke XP bar used (the "accent" sub-theme is the SOLID
+    // ramp, wrong for a fill; same reasoning as Gantt bars / Toast).
+    // undefined keeps the styled default (gray form ramp) untouched.
+    /* @__PURE__ */
+    jsx(ProgressIndicator, {
+      backgroundColor: intent === "accent" ? "$accentBackground" : void 0,
+      ...motion
+    })
+  });
+  const bar = elevationWrapperProps.elevation ? /* @__PURE__ */jsx(View, {
+    ...elevationWrapperProps,
+    borderRadius: knobProps.borderRadius.borderRadius,
+    flex: 1,
+    minWidth: 0,
+    width: "100%",
+    children: progressElement
+  }) : /* @__PURE__ */jsx(View, {
+    flex: 1,
+    minWidth: 0,
+    width: "100%",
+    children: progressElement
+  });
+  return /* @__PURE__ */jsxs(XStack, {
+    ...knobProps.gap,
+    alignItems: "center",
+    width: "100%",
+    children: [bar, showValue ? /* @__PURE__ */jsx(Text, {
+      ...knobProps.body,
+      color: knobProps.textAccentColor,
+      minWidth: 40,
+      textAlign: "right",
+      flexShrink: 0,
+      ...(isWeb ? {
+        "aria-hidden": true,
+        style: {
+          fontVariantNumeric: "tabular-nums"
+        }
+      } : {
+        accessible: false
+      }),
+      children: bidiIsolate(`${percent}%`)
+    }) : null]
   });
 }
 function Progress({
@@ -38,16 +165,18 @@ function Progress({
   helperText,
   error,
   required,
+  readOnly,
   size,
   id: idProp,
   value,
   defaultValue,
-  max = 100,
+  max,
   onBlur,
   progressProps,
   intent,
   skeleton,
-  compact
+  compact,
+  showValue: showValueProp
 }) {
   const {
     resolvedForm,
@@ -60,61 +189,49 @@ function Progress({
     compact
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const resolvedMax = resolveMax(max);
+  const showValue = showValueProp ?? Boolean(label);
+  const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
+  const trackSize = size ?? knobProps.sizeToken;
   if (skeleton) {
     return /* @__PURE__ */jsx(FieldLayout, {
       id,
       label,
       size,
       knobProps,
-      children: /* @__PURE__ */jsx(Skeleton, {
-        variant: "rounded",
+      children: /* @__PURE__ */jsxs(XStack, {
+        ...knobProps.gap,
+        alignItems: "center",
         width: "100%",
-        height: 6
+        children: [/* @__PURE__ */jsx(Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: trackHeightPx(trackSize),
+          flex: 1
+        }), showValue ? /* @__PURE__ */jsx(Skeleton, {
+          variant: "text",
+          width: 40
+        }) : null]
       })
     });
   }
-  const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
-  const renderProgress = (progressValue, blurHandler, hasError) => {
-    const progressElement = /* @__PURE__ */jsx(ProgressFrame, {
-      width: "100%",
-      size: knobProps.sizeToken,
-      borderRadius: knobProps.borderRadius.borderRadius,
-      outlined: knobProps.outlined,
-      "aria-label": typeof label === "string" && label ? label : t("Progress"),
-      ...progressProps,
-      id,
-      value: progressValue,
-      max,
-      ...(blurHandler ? {
-        onBlur: blurHandler
-      } : void 0),
-      "aria-required": required || void 0,
-      "aria-invalid": hasError || void 0,
-      children: intent && intent !== "accent" ? /* @__PURE__ */jsx(Intent, {
-        name: intent,
-        children: /* @__PURE__ */jsx(HueFillIndicator, {})
-      }) :
-      // `accent` rides the base theme's `$accentBackground` — the exact
-      // fill the bespoke XP bar used (the "accent" sub-theme is the SOLID
-      // ramp, wrong for a fill; same reasoning as Gantt bars / Toast).
-      // undefined keeps the styled default (gray form ramp) untouched.
-      /* @__PURE__ */
-      jsx(ProgressIndicator, {
-        backgroundColor: intent === "accent" ? "$accentBackground" : void 0
-      })
-    });
-    return /* @__PURE__ */jsx(XStack, {
-      height: size || knobProps.sizeToken,
-      alignItems: "center",
-      width: "100%",
-      children: elevationWrapperProps.elevation ? /* @__PURE__ */jsx(View, {
-        ...elevationWrapperProps,
-        borderRadius: knobProps.borderRadius.borderRadius,
-        width: "100%",
-        children: progressElement
-      }) : progressElement
-    });
-  };
+  const renderTrack = (rawValue, blurHandler, hasError) => /* @__PURE__ */jsx(ProgressTrack, {
+    id,
+    label,
+    progressValue: clampProgress(rawValue, resolvedMax),
+    max: resolvedMax,
+    required,
+    readOnly,
+    hasError,
+    intent,
+    size,
+    sizeToken: knobProps.sizeToken,
+    knobProps,
+    elevationWrapperProps,
+    progressProps,
+    showValue,
+    blurHandler
+  });
   if (!resolvedForm || !name) {
     return /* @__PURE__ */jsx(FieldLayout, {
       id,
@@ -125,7 +242,7 @@ function Progress({
       helperText,
       size,
       knobProps,
-      children: renderProgress(value ?? defaultValue ?? 0, void 0, !!error)
+      children: renderTrack(value ?? defaultValue ?? 0, void 0, !!error)
     });
   }
   return /* @__PURE__ */jsx(Field, {
@@ -144,7 +261,7 @@ function Progress({
         helperText,
         size,
         knobProps,
-        children: renderProgress(field.state.value ?? 0, mergeFieldHandler(field, "handleBlur", onBlur), !!resolvedError)
+        children: renderTrack(field.state.value ?? 0, mergeFieldHandler(field, "handleBlur", onBlur), !!resolvedError)
       });
     }
   });

package/dist/jsx/fields/Progress/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["Intent","Progress","TamaguiProgress","View","XStack","styled","useTheme","Field","FieldLayout","Skeleton","formControlColors","t","getElevationWrapperProps","getFieldError","mergeFieldHandler","useFormField","useResolvedValidators","jsx","ProgressFrame","backgroundColor","background","borderWidth","variants","outlined","true","ProgressIndicator","Indicator","border","HueFillIndicator","theme","fill","color9","val","name","form","formProp","validators","label","labelProps","helperText","error","required","size","id","idProp","value","defaultValue","max","onBlur","progressProps","intent","skeleton","compact","resolvedForm","knobProps","elevation","resolvedValidators","children","variant","width","height","elevationWrapperProps","renderProgress","progressValue","blurHandler","hasError","progressElement","sizeToken","borderRadius","alignItems","field","resolvedError","state"],"sources":["../../../../src/fields/Progress/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Intent","getSize","Progress","TamaguiProgress","Text","View","XStack","getVariableValue","isWeb","styled","useTheme","Field","FieldLayout","useFieldDescribedBy","Skeleton","formControlColors","bidiIsolate","t","getElevationWrapperProps","getFieldError","mergeFieldHandler","useFormField","useResolvedValidators","jsx","jsxs","ProgressFrame","backgroundColor","background","overflow","variants","outlined","true","ProgressIndicator","Indicator","border","trackHeightPx","size","raw","n","Number","isFinite","Math","round","resolveMax","max","clampProgress","value","min","indicatorMotion","transition","HueFillIndicator","theme","fill","color9","val","ProgressTrack","id","label","progressValue","required","readOnly","hasError","intent","sizeToken","knobProps","elevationWrapperProps","progressProps","showValue","blurHandler","describedBy","trackSize","percent","motion","name","progressElement","width","borderRadius","inputSurface","borderWidth","borderColor","boundary","onBlur","children","bar","elevation","flex","minWidth","gap","alignItems","body","color","textAccentColor","textAlign","flexShrink","style","fontVariantNumeric","accessible","form","formProp","validators","labelProps","helperText","error","idProp","defaultValue","skeleton","compact","showValueProp","resolvedForm","resolvedValidators","resolvedMax","Boolean","variant","height","renderTrack","rawValue","field","resolvedError","state"],"sources":["../../../../src/fields/Progress/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/Progress/index.native.js

@@ -29,6 +29,7 @@ __export(Progress_exports, {
 module.exports = __toCommonJS(Progress_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_theme = require("@multiplatform.one/theme");
+var import_get_token = require("@tamagui/get-token");
 var import_tamagui = require("tamagui");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_Skeleton = require("../../Skeleton/index.native.js");
@@ -37,7 +38,7 @@ var import_t = require("../../shared/t.native.js");
 var import_utils = require("../../shared/utils.native.js");
 var ProgressFrame = (0, import_tamagui.styled)(import_tamagui.Progress, {
   backgroundColor: import_colorRamps.formControlColors.background,
-  borderWidth: 0,
+  overflow: "hidden",
   variants: {
     outlined: {
       true: {
@@ -49,14 +50,142 @@ var ProgressFrame = (0, import_tamagui.styled)(import_tamagui.Progress, {
 var ProgressIndicator = (0, import_tamagui.styled)(import_tamagui.Progress.Indicator, {
   backgroundColor: import_colorRamps.formControlColors.border
 });
-function HueFillIndicator() {
+function trackHeightPx(size) {
+  try {
+    var raw = (0, import_tamagui.getVariableValue)((0, import_get_token.getSize)(size));
+    var n = typeof raw === "number" ? raw : Number(raw);
+    if (!Number.isFinite(n)) return 11;
+    return Math.round(n * 0.25);
+  } catch (unused) {
+    return 11;
+  }
+}
+function resolveMax(max) {
+  return typeof max === "number" && Number.isFinite(max) && max > 0 ? max : 100;
+}
+function clampProgress(value, max) {
+  var n = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(n)) return 0;
+  return Math.min(max, Math.max(0, n));
+}
+function indicatorMotion(transition) {
+  if (!transition) return {
+    transition: "none"
+  };
+  return {
+    transition
+  };
+}
+function HueFillIndicator(param) {
+  var {
+    transition
+  } = param;
   var _theme_color9;
   var theme = (0, import_tamagui.useTheme)();
   var fill = (_theme_color9 = theme.color9) === null || _theme_color9 === void 0 ? void 0 : _theme_color9.val;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProgressIndicator, {
     ...(fill ? {
       backgroundColor: fill
-    } : void 0)
+    } : void 0),
+    ...indicatorMotion(transition)
+  });
+}
+function ProgressTrack(param) {
+  var {
+    id,
+    label,
+    progressValue,
+    max,
+    required,
+    readOnly,
+    hasError,
+    intent,
+    size,
+    sizeToken,
+    knobProps,
+    elevationWrapperProps,
+    progressProps,
+    showValue,
+    blurHandler
+  } = param;
+  var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  var trackSize = size !== null && size !== void 0 ? size : sizeToken;
+  var percent = Math.round(progressValue / max * 100);
+  var motion = indicatorMotion(knobProps.transition);
+  var name = typeof label === "string" && label ? label : (0, import_t.t)("Progress");
+  var progressElement = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProgressFrame, {
+    width: "100%",
+    size: trackSize,
+    overflow: "hidden",
+    outlined: knobProps.outlined,
+    ...knobProps.borderRadius,
+    ...(knobProps.outlined ? knobProps.inputSurface : {
+      borderWidth: 0
+    }),
+    ...(knobProps.outlined ? {
+      borderColor: import_colorRamps.formControlColors.boundary
+    } : void 0),
+    "aria-label": name,
+    "aria-describedby": describedBy,
+    "aria-readonly": readOnly || void 0,
+    ...progressProps,
+    id,
+    value: progressValue,
+    max,
+    ...(blurHandler ? {
+      onBlur: blurHandler
+    } : void 0),
+    "aria-required": required || void 0,
+    "aria-invalid": hasError || void 0,
+    children: intent && intent !== "accent" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.Intent, {
+      name: intent,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(HueFillIndicator, {
+        transition: knobProps.transition
+      })
+    }) :
+    // `accent` rides the base theme's `$accentBackground` — the exact
+    // fill the bespoke XP bar used (the "accent" sub-theme is the SOLID
+    // ramp, wrong for a fill; same reasoning as Gantt bars / Toast).
+    // undefined keeps the styled default (gray form ramp) untouched.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(ProgressIndicator, {
+      backgroundColor: intent === "accent" ? "$accentBackground" : void 0,
+      ...motion
+    })
+  });
+  var bar = elevationWrapperProps.elevation ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    ...elevationWrapperProps,
+    borderRadius: knobProps.borderRadius.borderRadius,
+    flex: 1,
+    minWidth: 0,
+    width: "100%",
+    children: progressElement
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    flex: 1,
+    minWidth: 0,
+    width: "100%",
+    children: progressElement
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    ...knobProps.gap,
+    alignItems: "center",
+    width: "100%",
+    children: [bar, showValue ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...knobProps.body,
+      color: knobProps.textAccentColor,
+      minWidth: 40,
+      textAlign: "right",
+      flexShrink: 0,
+      ...(import_tamagui.isWeb ? {
+        "aria-hidden": true,
+        style: {
+          fontVariantNumeric: "tabular-nums"
+        }
+      } : {
+        accessible: false
+      }),
+      children: (0, import_t.bidiIsolate)(`${percent}%`)
+    }) : null]
   });
 }
 function Progress(param) {
@@ -69,16 +198,18 @@ function Progress(param) {
     helperText,
     error,
     required,
+    readOnly,
     size,
     id: idProp,
     value,
     defaultValue,
-    max = 100,
+    max,
     onBlur,
     progressProps,
     intent,
     skeleton,
-    compact
+    compact,
+    showValue: showValueProp
   } = param;
   var {
     resolvedForm,
@@ -91,60 +222,49 @@ function Progress(param) {
     compact
   });
   var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  var resolvedMax = resolveMax(max);
+  var showValue = showValueProp !== null && showValueProp !== void 0 ? showValueProp : Boolean(label);
+  var elevationWrapperProps = (0, import_utils.getElevationWrapperProps)(knobProps, elevation);
+  var trackSize = size !== null && size !== void 0 ? size : knobProps.sizeToken;
   if (skeleton) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
       label,
       size,
       knobProps,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-        variant: "rounded",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...knobProps.gap,
+        alignItems: "center",
         width: "100%",
-        height: 6
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: trackHeightPx(trackSize),
+          flex: 1
+        }), showValue ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          variant: "text",
+          width: 40
+        }) : null]
       })
     });
   }
-  var elevationWrapperProps = (0, import_utils.getElevationWrapperProps)(knobProps, elevation);
-  var renderProgress = function renderProgress2(progressValue, blurHandler, hasError) {
-    var progressElement = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProgressFrame, {
-      width: "100%",
-      size: knobProps.sizeToken,
-      borderRadius: knobProps.borderRadius.borderRadius,
-      outlined: knobProps.outlined,
-      // htmlFor labels don't name div[role=progressbar] — set the name directly
-      "aria-label": typeof label === "string" && label ? label : (0, import_t.t)("Progress"),
-      ...progressProps,
+  var renderTrack = function renderTrack2(rawValue, blurHandler, hasError) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProgressTrack, {
       id,
-      value: progressValue,
-      max,
-      ...(blurHandler ? {
-        onBlur: blurHandler
-      } : void 0),
-      "aria-required": required || void 0,
-      "aria-invalid": hasError || void 0,
-      children: intent && intent !== "accent" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.Intent, {
-        name: intent,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(HueFillIndicator, {})
-      }) :
-      // `accent` rides the base theme's `$accentBackground` — the exact
-      // fill the bespoke XP bar used (the "accent" sub-theme is the SOLID
-      // ramp, wrong for a fill; same reasoning as Gantt bars / Toast).
-      // undefined keeps the styled default (gray form ramp) untouched.
-      /* @__PURE__ */
-      (0, import_jsx_runtime.jsx)(ProgressIndicator, {
-        backgroundColor: intent === "accent" ? "$accentBackground" : void 0
-      })
-    });
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-      height: size || knobProps.sizeToken,
-      alignItems: "center",
-      width: "100%",
-      children: elevationWrapperProps.elevation ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        ...elevationWrapperProps,
-        borderRadius: knobProps.borderRadius.borderRadius,
-        width: "100%",
-        children: progressElement
-      }) : progressElement
+      label,
+      progressValue: clampProgress(rawValue, resolvedMax),
+      max: resolvedMax,
+      required,
+      readOnly,
+      hasError,
+      intent,
+      size,
+      sizeToken: knobProps.sizeToken,
+      knobProps,
+      elevationWrapperProps,
+      progressProps,
+      showValue,
+      blurHandler
     });
   };
   if (!resolvedForm || !name) {
@@ -158,7 +278,7 @@ function Progress(param) {
       helperText,
       size,
       knobProps,
-      children: renderProgress((_ref = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref !== void 0 ? _ref : 0, void 0, !!error)
+      children: renderTrack((_ref = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref !== void 0 ? _ref : 0, void 0, !!error)
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
@@ -178,7 +298,7 @@ function Progress(param) {
         helperText,
         size,
         knobProps,
-        children: renderProgress((_field_state_value = field.state.value) !== null && _field_state_value !== void 0 ? _field_state_value : 0, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError)
+        children: renderTrack((_field_state_value = field.state.value) !== null && _field_state_value !== void 0 ? _field_state_value : 0, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError)
       });
     }
   });