@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Form/Form.Dropdown.js

@@ -1,64 +1,315 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Sheet from "../Dialog/Dialog.Sheet.js";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
+import { attempt, errorMessage } from "../utils/async.js";
 import { useRef, useState } from "react";
 import { ActivityIndicator, View } from "react-native";
-function Dropdown({ title, options, variant = "secondary", size = "small", disabled = false, readOnly = false, buttonProps, renderOption, testID, }) {
-    const theme = useTheme();
-    const saving = useRef(false);
-    const [open, setOpen] = useState(false);
-    const [pending, setPending] = useState();
-    const [error, setError] = useState();
-    const blocked = disabled || readOnly || pending !== undefined;
-    const close = () => {
-        if (!saving.current)
-            setOpen(false);
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+function Dropdown(t0) {
+  const $ = _c(67);
+  const {
+    title,
+    options,
+    variant: t1,
+    size: t2,
+    disabled: t3,
+    readOnly: t4,
+    buttonProps,
+    renderOption,
+    testID
+  } = t0;
+  const variant = t1 === undefined ? "secondary" : t1;
+  const size = t2 === undefined ? "small" : t2;
+  const disabled = t3 === undefined ? false : t3;
+  const readOnly = t4 === undefined ? false : t4;
+  const theme = useTheme();
+  const saving = useRef(false);
+  const [open, setOpen] = useState(false);
+  const [pending, setPending] = useState();
+  const [error, setError] = useState();
+  const blocked = disabled || readOnly || pending !== undefined;
+  let t5;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => {
+      if (!saving.current) {
+        setOpen(false);
+      }
     };
-    const choose = async (option) => {
-        if (blocked || option.disabled || saving.current)
-            return;
-        saving.current = true;
-        setPending(option.id);
-        setError(undefined);
-        try {
-            await option.onPress();
-            setOpen(false);
-        }
-        catch (cause) {
-            setError(cause instanceof Error && cause.message.trim()
-                ? cause.message
-                : "No se pudo completar la acción. Vuelve a intentarlo.");
-        }
-        finally {
-            saving.current = false;
-            setPending(undefined);
-        }
+    $[0] = t5;
+  } else {
+    t5 = $[0];
+  }
+  const close = t5;
+  let T0;
+  let t10;
+  let t11;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[1] !== blocked || $[2] !== buttonProps || $[3] !== open || $[4] !== options || $[5] !== pending || $[6] !== renderOption || $[7] !== size || $[8] !== testID || $[9] !== theme.primary || $[10] !== theme.text.accent || $[11] !== theme.text.onPrimary || $[12] !== title || $[13] !== variant) {
+    const choose = async option => {
+      if (blocked || option.disabled || saving.current) {
+        return;
+      }
+      saving.current = true;
+      setPending(option.id);
+      setError(undefined);
+      const result = await attempt(async () => {
+        await option.onPress();
+        setOpen(false);
+      });
+      saving.current = false;
+      setPending(undefined);
+      if (!result.ok) {
+        setError(errorMessage(result.error, "No se pudo completar la acci\xF3n. Vuelve a intentarlo."));
+      }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Pressable, { ...buttonProps, accessibilityLabel: buttonProps?.accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
-                    ...buttonProps?.accessibilityState,
-                    disabled: blocked,
-                    expanded: open,
-                }, className: cn("flex-row items-center justify-between gap-3 rounded-lg px-3", variant === "primary"
-                    ? "bg-primary"
-                    : variant === "secondary"
-                        ? "bg-bg-card border border-primary"
-                        : "bg-transparent border border-primary", buttonProps?.className), disabled: blocked, onPress: () => {
-                    setError(undefined);
-                    setOpen(true);
-                }, style: [
-                    {
-                        minHeight: 48,
-                        minWidth: 48,
-                        paddingVertical: { xs: 6, small: 8, medium: 10, large: 12 }[size],
-                    },
-                    buttonProps?.style,
-                ], testID: testID, children: [_jsx(Typography.Text, { className: variant === "primary" ? "text-text-on-primary" : "text-text-accent", variant: size === "large" || size === "medium" ? "body" : "bodySmall", children: title }), _jsx(Icon, { color: variant === "primary" ? theme.text.onPrimary : theme.text.accent, name: "expand", size: 16 })] }), _jsxs(Sheet, { dismissible: pending === undefined, onClose: close, title: title, visible: open, children: [options.map((option) => (_jsxs(Pressable, { accessibilityLabel: option.title, accessibilityRole: "button", accessibilityState: {
-                            disabled: blocked || !!option.disabled,
-                            busy: pending === option.id,
-                        }, className: "flex-row items-center gap-3 border-b border-border-light py-3", disabled: blocked || option.disabled, onPress: () => void choose(option), style: { minHeight: 48, minWidth: 48 }, children: [_jsx(View, { className: "flex-1", children: renderOption ? (renderOption(option)) : (_jsx(Typography.Text, { className: option.disabled ? "text-text-disabled" : "text-text-primary", children: option.title })) }), pending === option.id ? _jsx(ActivityIndicator, { color: theme.primary }) : null] }, option.id))), !options.length ? (_jsx(Typography.Text, { children: "No hay opciones disponibles." })) : null, error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: "pt-3 text-danger", selectable: true, children: error })) : null] })] }));
+    const t12 = buttonProps?.accessibilityLabel ?? title;
+    const t13 = buttonProps?.accessibilityState;
+    let t14;
+    if ($[21] !== blocked || $[22] !== open || $[23] !== t13) {
+      t14 = {
+        ...t13,
+        disabled: blocked,
+        expanded: open
+      };
+      $[21] = blocked;
+      $[22] = open;
+      $[23] = t13;
+      $[24] = t14;
+    } else {
+      t14 = $[24];
+    }
+    const t15 = variant === "primary" ? "bg-primary" : variant === "secondary" ? "bg-bg-card border border-primary" : "bg-transparent border border-primary";
+    const t16 = buttonProps?.className;
+    let t17;
+    if ($[25] !== t15 || $[26] !== t16) {
+      t17 = cn("flex-row items-center justify-between gap-3 rounded-lg px-3", t15, t16);
+      $[25] = t15;
+      $[26] = t16;
+      $[27] = t17;
+    } else {
+      t17 = $[27];
+    }
+    let t18;
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+      t18 = () => {
+        setError(undefined);
+        setOpen(true);
+      };
+      $[28] = t18;
+    } else {
+      t18 = $[28];
+    }
+    let t19;
+    if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+      t19 = {
+        xs: 6,
+        small: 8,
+        medium: 10,
+        large: 12
+      };
+      $[29] = t19;
+    } else {
+      t19 = $[29];
+    }
+    const t20 = t19[size];
+    let t21;
+    if ($[30] !== t20) {
+      t21 = {
+        minHeight: 48,
+        minWidth: 48,
+        paddingVertical: t20
+      };
+      $[30] = t20;
+      $[31] = t21;
+    } else {
+      t21 = $[31];
+    }
+    const t22 = buttonProps?.style;
+    let t23;
+    if ($[32] !== t21 || $[33] !== t22) {
+      t23 = [t21, t22];
+      $[32] = t21;
+      $[33] = t22;
+      $[34] = t23;
+    } else {
+      t23 = $[34];
+    }
+    const t24 = variant === "primary" ? "text-text-on-primary" : "text-text-accent";
+    const t25 = size === "large" || size === "medium" ? "body" : "bodySmall";
+    let t26;
+    if ($[35] !== t24 || $[36] !== t25 || $[37] !== title) {
+      t26 = _jsx(Typography.Text, {
+        className: t24,
+        variant: t25,
+        children: title
+      });
+      $[35] = t24;
+      $[36] = t25;
+      $[37] = title;
+      $[38] = t26;
+    } else {
+      t26 = $[38];
+    }
+    const t27 = variant === "primary" ? theme.text.onPrimary : theme.text.accent;
+    let t28;
+    if ($[39] !== t27) {
+      t28 = _jsx(Icon, {
+        color: t27,
+        name: "expand",
+        size: 16
+      });
+      $[39] = t27;
+      $[40] = t28;
+    } else {
+      t28 = $[40];
+    }
+    if ($[41] !== blocked || $[42] !== buttonProps || $[43] !== t12 || $[44] !== t14 || $[45] !== t17 || $[46] !== t23 || $[47] !== t26 || $[48] !== t28 || $[49] !== testID) {
+      t11 = _jsxs(Pressable, {
+        ...buttonProps,
+        accessibilityLabel: t12,
+        accessibilityRole: "button",
+        accessibilityState: t14,
+        className: t17,
+        disabled: blocked,
+        onPress: t18,
+        style: t23,
+        testID: testID,
+        children: [t26, t28]
+      });
+      $[41] = blocked;
+      $[42] = buttonProps;
+      $[43] = t12;
+      $[44] = t14;
+      $[45] = t17;
+      $[46] = t23;
+      $[47] = t26;
+      $[48] = t28;
+      $[49] = testID;
+      $[50] = t11;
+    } else {
+      t11 = $[50];
+    }
+    T0 = Sheet;
+    t6 = pending === undefined;
+    t7 = close;
+    t8 = title;
+    t9 = open;
+    t10 = options.map(option_0 => _jsxs(Pressable, {
+      accessibilityLabel: option_0.title,
+      accessibilityRole: "button",
+      accessibilityState: {
+        disabled: blocked || !!option_0.disabled,
+        busy: pending === option_0.id
+      },
+      className: "flex-row items-center gap-3 border-b border-border-light py-3",
+      disabled: blocked || option_0.disabled,
+      onPress: () => void choose(option_0),
+      style: {
+        minHeight: 48,
+        minWidth: 48
+      },
+      children: [_jsx(View, {
+        className: "flex-1",
+        children: renderOption ? renderOption(option_0) : _jsx(Typography.Text, {
+          className: option_0.disabled ? "text-text-disabled" : "text-text-primary",
+          children: option_0.title
+        })
+      }), pending === option_0.id ? _jsx(ActivityIndicator, {
+        color: theme.primary
+      }) : null]
+    }, option_0.id));
+    $[1] = blocked;
+    $[2] = buttonProps;
+    $[3] = open;
+    $[4] = options;
+    $[5] = pending;
+    $[6] = renderOption;
+    $[7] = size;
+    $[8] = testID;
+    $[9] = theme.primary;
+    $[10] = theme.text.accent;
+    $[11] = theme.text.onPrimary;
+    $[12] = title;
+    $[13] = variant;
+    $[14] = T0;
+    $[15] = t10;
+    $[16] = t11;
+    $[17] = t6;
+    $[18] = t7;
+    $[19] = t8;
+    $[20] = t9;
+  } else {
+    T0 = $[14];
+    t10 = $[15];
+    t11 = $[16];
+    t6 = $[17];
+    t7 = $[18];
+    t8 = $[19];
+    t9 = $[20];
+  }
+  let t12;
+  if ($[51] !== options.length) {
+    t12 = !options.length ? _jsx(Typography.Text, {
+      children: "No hay opciones disponibles."
+    }) : null;
+    $[51] = options.length;
+    $[52] = t12;
+  } else {
+    t12 = $[52];
+  }
+  let t13;
+  if ($[53] !== error) {
+    t13 = error ? _jsx(Typography.Text, {
+      accessibilityLiveRegion: "polite",
+      accessibilityRole: "alert",
+      className: "pt-3 text-danger",
+      selectable: true,
+      children: error
+    }) : null;
+    $[53] = error;
+    $[54] = t13;
+  } else {
+    t13 = $[54];
+  }
+  let t14;
+  if ($[55] !== T0 || $[56] !== t10 || $[57] !== t12 || $[58] !== t13 || $[59] !== t6 || $[60] !== t7 || $[61] !== t8 || $[62] !== t9) {
+    t14 = _jsxs(T0, {
+      dismissible: t6,
+      onClose: t7,
+      title: t8,
+      visible: t9,
+      children: [t10, t12, t13]
+    });
+    $[55] = T0;
+    $[56] = t10;
+    $[57] = t12;
+    $[58] = t13;
+    $[59] = t6;
+    $[60] = t7;
+    $[61] = t8;
+    $[62] = t9;
+    $[63] = t14;
+  } else {
+    t14 = $[63];
+  }
+  let t15;
+  if ($[64] !== t11 || $[65] !== t14) {
+    t15 = _jsxs(_Fragment, {
+      children: [t11, t14]
+    });
+    $[64] = t11;
+    $[65] = t14;
+    $[66] = t15;
+  } else {
+    t15 = $[66];
+  }
+  return t15;
 }
 export default Dropdown;

package/dist/Form/Form.ErrorSummary.js

@@ -1,53 +1,245 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { uniqueKeys } from "../utils/keys.js";
 import { useEffect, useRef } from "react";
-import { AccessibilityInfo, StyleSheet, View, } from "react-native";
-export default function ErrorSummary({ errors, onSelectError, title = "Revisa los siguientes errores", announce = true, className, style, itemStyle, renderErrorContent, renderHeader, itemTextProps, titleTextProps, ...props }) {
-    const theme = useTheme();
-    const nonemptyEpisode = useRef(false);
-    uniqueKeys(errors, (error) => error.id, "ErrorSummary");
-    for (const { label, message } of errors) {
-        if (typeof label !== "string" || !label.trim())
-            throw new Error("Form.ErrorSummary requires non-empty error labels.");
-        if (typeof message !== "string" || !message.trim())
-            throw new Error("Form.ErrorSummary requires non-empty error messages.");
+import { AccessibilityInfo, StyleSheet, View } from "react-native";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+export default function ErrorSummary(t0) {
+  const $ = _c(45);
+  let className;
+  let errors;
+  let itemStyle;
+  let itemTextProps;
+  let onSelectError;
+  let props;
+  let renderErrorContent;
+  let renderHeader;
+  let style;
+  let t1;
+  let t2;
+  let titleTextProps;
+  if ($[0] !== t0) {
+    ({
+      errors,
+      onSelectError,
+      title: t1,
+      announce: t2,
+      className,
+      style,
+      itemStyle,
+      renderErrorContent,
+      renderHeader,
+      itemTextProps,
+      titleTextProps,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = errors;
+    $[3] = itemStyle;
+    $[4] = itemTextProps;
+    $[5] = onSelectError;
+    $[6] = props;
+    $[7] = renderErrorContent;
+    $[8] = renderHeader;
+    $[9] = style;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = titleTextProps;
+  } else {
+    className = $[1];
+    errors = $[2];
+    itemStyle = $[3];
+    itemTextProps = $[4];
+    onSelectError = $[5];
+    props = $[6];
+    renderErrorContent = $[7];
+    renderHeader = $[8];
+    style = $[9];
+    t1 = $[10];
+    t2 = $[11];
+    titleTextProps = $[12];
+  }
+  const title = t1 === undefined ? "Revisa los siguientes errores" : t1;
+  const announce = t2 === undefined ? true : t2;
+  const theme = useTheme();
+  const nonemptyEpisode = useRef(false);
+  uniqueKeys(errors, _temp, "ErrorSummary");
+  for (const {
+    label,
+    message
+  } of errors) {
+    if (typeof label !== "string" || !label.trim()) {
+      throw new Error("Form.ErrorSummary requires non-empty error labels.");
+    }
+    if (typeof message !== "string" || !message.trim()) {
+      throw new Error("Form.ErrorSummary requires non-empty error messages.");
     }
-    useEffect(() => {
-        if (errors.length === 0) {
-            nonemptyEpisode.current = false;
-            return;
-        }
-        if (nonemptyEpisode.current)
-            return;
-        nonemptyEpisode.current = true;
-        if (announce)
-            AccessibilityInfo.announceForAccessibility([title, ...errors.map(({ label, message }) => `${label}: ${message}`)].join("\n"));
-    }, [announce, errors, title]);
-    if (errors.length === 0)
-        return null;
-    return (_jsxs(View, { className: className, style: [
-            {
-                backgroundColor: theme.bg.card,
-                borderColor: theme.danger,
-                borderWidth: 2,
-                borderRadius: 8,
-                padding: 16,
-                gap: 8,
-            },
-            style,
-        ], ...props, children: [renderHeader ? (_jsx(View, { accessibilityLabel: title, accessibilityRole: "header", accessible: true, children: renderHeader(title) })) : (_jsx(Typography.Text, { semibold: true, variant: "body", ...titleTextProps, accessibilityRole: "header", allowFontScaling: true, numberOfLines: 0, children: title })), errors.map((error, index) => (_jsx(Pressable, { accessibilityLabel: `${error.label}: ${error.message}`, accessibilityRole: "button", accessible: true, hitSlop: 0, onPress: () => onSelectError(error.id), style: [styles.item, itemStyle, styles.target], children: renderErrorContent ? (renderErrorContent(error, index)) : (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { semibold: true, variant: "bodySmall", ...itemTextProps, allowFontScaling: true, numberOfLines: 0, children: error.label }), _jsx(Typography.Text, { className: "text-text-accent", underline: true, ...itemTextProps, allowFontScaling: true, numberOfLines: 0, children: error.message })] })) }, error.id)))] }));
+  }
+  let t3;
+  let t4;
+  if ($[13] !== announce || $[14] !== errors || $[15] !== title) {
+    t3 = () => {
+      if (errors.length === 0) {
+        nonemptyEpisode.current = false;
+        return;
+      }
+      if (nonemptyEpisode.current) {
+        return;
+      }
+      nonemptyEpisode.current = true;
+      if (announce) {
+        AccessibilityInfo.announceForAccessibility([title, ...errors.map(_temp2)].join("\n"));
+      }
+    };
+    t4 = [announce, errors, title];
+    $[13] = announce;
+    $[14] = errors;
+    $[15] = title;
+    $[16] = t3;
+    $[17] = t4;
+  } else {
+    t3 = $[16];
+    t4 = $[17];
+  }
+  useEffect(t3, t4);
+  if (errors.length === 0) {
+    return null;
+  }
+  let t5;
+  if ($[18] !== theme.bg.card || $[19] !== theme.danger) {
+    t5 = {
+      backgroundColor: theme.bg.card,
+      borderColor: theme.danger,
+      borderWidth: 2,
+      borderRadius: 8,
+      padding: 16,
+      gap: 8
+    };
+    $[18] = theme.bg.card;
+    $[19] = theme.danger;
+    $[20] = t5;
+  } else {
+    t5 = $[20];
+  }
+  let t6;
+  if ($[21] !== style || $[22] !== t5) {
+    t6 = [t5, style];
+    $[21] = style;
+    $[22] = t5;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  let t7;
+  if ($[24] !== renderHeader || $[25] !== title || $[26] !== titleTextProps) {
+    t7 = renderHeader ? _jsx(View, {
+      accessibilityLabel: title,
+      accessibilityRole: "header",
+      accessible: true,
+      children: renderHeader(title)
+    }) : _jsx(Typography.Text, {
+      semibold: true,
+      variant: "body",
+      ...titleTextProps,
+      accessibilityRole: "header",
+      allowFontScaling: true,
+      numberOfLines: 0,
+      children: title
+    });
+    $[24] = renderHeader;
+    $[25] = title;
+    $[26] = titleTextProps;
+    $[27] = t7;
+  } else {
+    t7 = $[27];
+  }
+  let t8;
+  if ($[28] !== errors || $[29] !== itemStyle || $[30] !== itemTextProps || $[31] !== onSelectError || $[32] !== renderErrorContent) {
+    let t9;
+    if ($[34] !== itemStyle || $[35] !== itemTextProps || $[36] !== onSelectError || $[37] !== renderErrorContent) {
+      t9 = (error_0, index) => _jsx(Pressable, {
+        accessibilityLabel: `${error_0.label}: ${error_0.message}`,
+        accessibilityRole: "button",
+        accessible: true,
+        hitSlop: 0,
+        onPress: () => onSelectError(error_0.id),
+        style: [styles.item, itemStyle, styles.target],
+        children: renderErrorContent ? renderErrorContent(error_0, index) : _jsxs(_Fragment, {
+          children: [_jsx(Typography.Text, {
+            semibold: true,
+            variant: "bodySmall",
+            ...itemTextProps,
+            allowFontScaling: true,
+            numberOfLines: 0,
+            children: error_0.label
+          }), _jsx(Typography.Text, {
+            className: "text-text-accent",
+            underline: true,
+            ...itemTextProps,
+            allowFontScaling: true,
+            numberOfLines: 0,
+            children: error_0.message
+          })]
+        })
+      }, error_0.id);
+      $[34] = itemStyle;
+      $[35] = itemTextProps;
+      $[36] = onSelectError;
+      $[37] = renderErrorContent;
+      $[38] = t9;
+    } else {
+      t9 = $[38];
+    }
+    t8 = errors.map(t9);
+    $[28] = errors;
+    $[29] = itemStyle;
+    $[30] = itemTextProps;
+    $[31] = onSelectError;
+    $[32] = renderErrorContent;
+    $[33] = t8;
+  } else {
+    t8 = $[33];
+  }
+  let t9;
+  if ($[39] !== className || $[40] !== props || $[41] !== t6 || $[42] !== t7 || $[43] !== t8) {
+    t9 = _jsxs(View, {
+      className: className,
+      style: t6,
+      ...props,
+      children: [t7, t8]
+    });
+    $[39] = className;
+    $[40] = props;
+    $[41] = t6;
+    $[42] = t7;
+    $[43] = t8;
+    $[44] = t9;
+  } else {
+    t9 = $[44];
+  }
+  return t9;
+}
+function _temp2(t0) {
+  const {
+    label: label_0,
+    message: message_0
+  } = t0;
+  return `${label_0}: ${message_0}`;
+}
+function _temp(error) {
+  return error.id;
 }
 const styles = StyleSheet.create({
-    item: {
-        justifyContent: "center",
-        paddingVertical: 8,
-        gap: 4,
-    },
-    target: {
-        minHeight: 48,
-        minWidth: 48,
-    },
+  item: {
+    justifyContent: "center",
+    paddingVertical: 8,
+    gap: 4
+  },
+  target: {
+    minHeight: 48,
+    minWidth: 48
+  }
 });

package/dist/Form/Form.Field.d.ts

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+import { type Control, type FieldValues, type Path, type PathValue, type RegisterOptions } from "react-hook-form";
+export interface FieldRenderProps<V> {
+    value: V;
+    onChange: (value: V) => void;
+    onBlur: () => void;
+    /** The explicit `error` prop, otherwise the validation message. */
+    error?: string;
+    disabled?: boolean;
+}
+export type FieldRules<T extends FieldValues, N extends Path<T>> = Omit<RegisterOptions<T, N>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled">;
+export interface FieldProps<T extends FieldValues, N extends Path<T>> {
+    control: Control<T>;
+    name: N;
+    rules?: FieldRules<T, N>;
+    /** Wins over the validation message, e.g. a server-side error. */
+    error?: string;
+    render: (field: FieldRenderProps<PathValue<T, N>>) => ReactElement;
+}
+/**
+ * The one react-hook-form adapter of the DS. Any control (DS or app) becomes a
+ * form field with typed value, blur, validation message and disabled state.
+ */
+export default function Field<T extends FieldValues, N extends Path<T>>({ control, name, rules, error, render, }: FieldProps<T, N>): import("react").JSX.Element;