@sincpro/mobile-ui 3.1.0 → 3.2.0

package/dist/Form/Form.KeyboardToolbarHost.js

@@ -1,8 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
 import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
-import { useLayoutEffect, useSyncExternalStore } from "react";
-import { Platform, StyleSheet } from "react-native";
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Platform, StyleSheet, useWindowDimensions, View } from "react-native";
 import { KeyboardToolbar } from "react-native-keyboard-controller";
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 /** keyboard-controller ships English labels; the app speaks Spanish. */
@@ -96,7 +96,7 @@ export function useKeyboardToolbarInset() {
  * Each KeyboardForm and each sheet is a group, so previous / next stay inside it.
  */
 export default function KeyboardToolbarHost(t0) {
-  const $ = _c(13);
+  const $ = _c(21);
   const {
     doneLabel: t1,
     ios: t2,
@@ -107,67 +107,108 @@ export default function KeyboardToolbarHost(t0) {
   const android = t3 === undefined ? false : t3;
   const theme = useTheme();
   const enabled = Platform.OS === "ios" ? ios : Platform.OS === "android" ? android : false;
+  const {
+    height: windowHeight
+  } = useWindowDimensions();
+  const frame = useRef(null);
+  const [gap, setGap] = useState(0);
   let t4;
+  if ($[0] !== windowHeight) {
+    t4 = () => frame.current?.measureInWindow((_x, top, _width, height) => setGap(Math.max(0, windowHeight - top - height)));
+    $[0] = windowHeight;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const measureGap = t4;
   let t5;
-  if ($[0] !== enabled) {
-    t4 = () => {
+  let t6;
+  if ($[2] !== enabled) {
+    t5 = () => {
       publish(enabled ? TOOLBAR_HEIGHT : 0);
       return _temp;
     };
-    t5 = [enabled];
-    $[0] = enabled;
-    $[1] = t4;
-    $[2] = t5;
+    t6 = [enabled];
+    $[2] = enabled;
+    $[3] = t5;
+    $[4] = t6;
   } else {
-    t4 = $[1];
-    t5 = $[2];
+    t5 = $[3];
+    t6 = $[4];
   }
-  useLayoutEffect(t4, t5);
+  useLayoutEffect(t5, t6);
   if (!enabled) {
     return null;
   }
-  let t6;
-  if ($[3] !== theme.bg.card || $[4] !== theme.bg.muted || $[5] !== theme.text.accent || $[6] !== theme.text.disabled) {
-    t6 = {
+  let t7;
+  if ($[5] !== theme.bg.card || $[6] !== theme.bg.muted || $[7] !== theme.text.accent || $[8] !== theme.text.disabled) {
+    t7 = {
       primary: theme.text.accent,
       disabled: theme.text.disabled,
       background: theme.bg.card,
       ripple: theme.bg.muted
     };
-    $[3] = theme.bg.card;
-    $[4] = theme.bg.muted;
-    $[5] = theme.text.accent;
-    $[6] = theme.text.disabled;
-    $[7] = t6;
+    $[5] = theme.bg.card;
+    $[6] = theme.bg.muted;
+    $[7] = theme.text.accent;
+    $[8] = theme.text.disabled;
+    $[9] = t7;
   } else {
-    t6 = $[7];
+    t7 = $[9];
   }
-  const colors = t6;
-  let t7;
-  if ($[8] !== colors) {
-    t7 = {
+  const colors = t7;
+  let t8;
+  if ($[10] !== gap) {
+    t8 = {
+      opened: gap
+    };
+    $[10] = gap;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  let t9;
+  if ($[12] !== colors) {
+    t9 = {
       light: colors,
       dark: colors
     };
-    $[8] = colors;
-    $[9] = t7;
+    $[12] = colors;
+    $[13] = t9;
   } else {
-    t7 = $[9];
+    t9 = $[13];
   }
-  let t8;
-  if ($[10] !== doneLabel || $[11] !== t7) {
-    t8 = _jsx(KeyboardToolbar, {
+  let t10;
+  if ($[14] !== doneLabel || $[15] !== t8 || $[16] !== t9) {
+    t10 = _jsx(KeyboardToolbar, {
       button: ToolbarButton,
       doneText: doneLabel,
-      theme: t7
+      offset: t8,
+      theme: t9
+    });
+    $[14] = doneLabel;
+    $[15] = t8;
+    $[16] = t9;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  let t11;
+  if ($[18] !== measureGap || $[19] !== t10) {
+    t11 = _jsx(View, {
+      onLayout: measureGap,
+      pointerEvents: "box-none",
+      ref: frame,
+      style: StyleSheet.absoluteFill,
+      children: t10
     });
-    $[10] = doneLabel;
-    $[11] = t7;
-    $[12] = t8;
+    $[18] = measureGap;
+    $[19] = t10;
+    $[20] = t11;
   } else {
-    t8 = $[12];
+    t11 = $[20];
   }
-  return t8;
+  return t11;
 }
 function _temp() {
   return publish(0);

package/dist/Form/Form.PickerField.js

@@ -2,6 +2,7 @@ import { c as _c } from "react/compiler-runtime";
 import { FlashList } from "@shopify/flash-list";
 import Sheet from "../Dialog/Dialog.Sheet.js";
 import Icon from "../Display/Display.Icon.js";
+import { ChoiceRow } from "./choice-row.js";
 import { inputTextStyle } from "./input-text.js";
 import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
@@ -19,7 +20,7 @@ const SEARCH_DELAY_MS = 250;
  * one virtualized list, the shared overlay sheet.
  */
 function PickerField(t0) {
-  const $ = _c(100);
+  const $ = _c(99);
   const {
     label,
     value,
@@ -188,151 +189,127 @@ function PickerField(t0) {
   }
   const choose = t13;
   let t14;
-  if ($[25] !== choose || $[26] !== theme.text.accent || $[27] !== value) {
+  if ($[25] !== choose || $[26] !== value) {
     t14 = t15 => {
       const {
         item
       } = t15;
-      const selected = item.value === value;
-      return _jsxs(Pressable, {
-        accessibilityLabel: item.label,
-        accessibilityRole: "button",
-        accessibilityState: {
-          selected
-        },
-        className: "flex-row items-center gap-3 border-b border-border-light py-3",
+      return _jsx(ChoiceRow, {
+        description: item.description,
+        label: item.label,
+        look: "list",
         onPress: () => choose(item),
-        style: {
-          minHeight: 48
-        },
-        children: [_jsxs(View, {
-          style: {
-            flex: 1
-          },
-          children: [_jsx(Typography.Text, {
-            semibold: selected,
-            children: item.label
-          }), item.description ? _jsx(Typography.Text, {
-            className: "text-text-tertiary",
-            variant: "caption",
-            children: item.description
-          }) : null]
-        }), selected ? _jsx(Icon, {
-          color: theme.text.accent,
-          name: "check",
-          size: 18
-        }) : null]
+        selected: item.value === value
       });
     };
     $[25] = choose;
-    $[26] = theme.text.accent;
-    $[27] = value;
-    $[28] = t14;
+    $[26] = value;
+    $[27] = t14;
   } else {
-    t14 = $[28];
+    t14 = $[27];
   }
   const renderOption = t14;
   let t15;
-  if ($[29] !== className) {
+  if ($[28] !== className) {
     t15 = cn("gap-1", className);
-    $[29] = className;
-    $[30] = t15;
+    $[28] = className;
+    $[29] = t15;
   } else {
-    t15 = $[30];
+    t15 = $[29];
   }
   let t16;
-  if ($[31] !== label) {
+  if ($[30] !== label) {
     t16 = _jsx(Typography.Text, {
       className: "text-text-primary",
       semibold: true,
       variant: "bodySmall",
       children: label
     });
-    $[31] = label;
-    $[32] = t16;
+    $[30] = label;
+    $[31] = t16;
   } else {
-    t16 = $[32];
+    t16 = $[31];
   }
   const t17 = `${label}: ${current ?? placeholder}`;
   let t18;
-  if ($[33] !== disabled || $[34] !== open) {
+  if ($[32] !== disabled || $[33] !== open) {
     t18 = {
       disabled,
       expanded: open
     };
-    $[33] = disabled;
-    $[34] = open;
-    $[35] = t18;
+    $[32] = disabled;
+    $[33] = open;
+    $[34] = t18;
   } else {
-    t18 = $[35];
+    t18 = $[34];
   }
   let t19;
-  if ($[36] !== startSearch) {
+  if ($[35] !== startSearch) {
     t19 = () => {
       setOpen(true);
       startSearch();
     };
-    $[36] = startSearch;
-    $[37] = t19;
+    $[35] = startSearch;
+    $[36] = t19;
   } else {
-    t19 = $[37];
+    t19 = $[36];
   }
   let t20;
-  if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
     t20 = {
       minHeight: 48,
       minWidth: 48
     };
-    $[38] = t20;
+    $[37] = t20;
   } else {
-    t20 = $[38];
+    t20 = $[37];
   }
   const t21 = current ? "text-text-primary" : "text-text-tertiary";
   let t22;
-  if ($[39] !== t21) {
+  if ($[38] !== t21) {
     t22 = cn("flex-1", t21);
-    $[39] = t21;
-    $[40] = t22;
+    $[38] = t21;
+    $[39] = t22;
   } else {
-    t22 = $[40];
+    t22 = $[39];
   }
   let t23;
-  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
     t23 = {
       paddingVertical: 12
     };
-    $[41] = t23;
+    $[40] = t23;
   } else {
-    t23 = $[41];
+    t23 = $[40];
   }
   const t24 = current ?? placeholder;
   let t25;
-  if ($[42] !== t22 || $[43] !== t24) {
+  if ($[41] !== t22 || $[42] !== t24) {
     t25 = _jsx(Typography.Text, {
       className: t22,
       style: t23,
       children: t24
     });
-    $[42] = t22;
-    $[43] = t24;
-    $[44] = t25;
+    $[41] = t22;
+    $[42] = t24;
+    $[43] = t25;
   } else {
-    t25 = $[44];
+    t25 = $[43];
   }
   let t26;
-  if ($[45] !== theme.icon.secondary) {
+  if ($[44] !== theme.icon.secondary) {
     t26 = _jsx(Icon, {
       color: theme.icon.secondary,
       name: "search",
       size: 18
     });
-    $[45] = theme.icon.secondary;
-    $[46] = t26;
+    $[44] = theme.icon.secondary;
+    $[45] = t26;
   } else {
-    t26 = $[46];
+    t26 = $[45];
   }
   let t27;
-  if ($[47] !== disabled || $[48] !== t17 || $[49] !== t18 || $[50] !== t19 || $[51] !== t25 || $[52] !== t26) {
+  if ($[46] !== disabled || $[47] !== t17 || $[48] !== t18 || $[49] !== t19 || $[50] !== t25 || $[51] !== t26) {
     t27 = _jsxs(Pressable, {
       accessibilityHint: "Abre la b\xFAsqueda de opciones",
       accessibilityLabel: t17,
@@ -344,69 +321,69 @@ function PickerField(t0) {
       style: t20,
       children: [t25, t26]
     });
-    $[47] = disabled;
-    $[48] = t17;
-    $[49] = t18;
-    $[50] = t19;
-    $[51] = t25;
-    $[52] = t26;
-    $[53] = t27;
+    $[46] = disabled;
+    $[47] = t17;
+    $[48] = t18;
+    $[49] = t19;
+    $[50] = t25;
+    $[51] = t26;
+    $[52] = t27;
   } else {
-    t27 = $[53];
+    t27 = $[52];
   }
   let t28;
-  if ($[54] !== error) {
+  if ($[53] !== error) {
     t28 = error ? _jsx(Typography.Text, {
       accessibilityLiveRegion: "polite",
       className: "text-danger",
       children: error
     }) : null;
-    $[54] = error;
-    $[55] = t28;
+    $[53] = error;
+    $[54] = t28;
   } else {
-    t28 = $[55];
+    t28 = $[54];
   }
   let t29;
-  if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
     t29 = ["90%"];
-    $[56] = t29;
+    $[55] = t29;
   } else {
-    t29 = $[56];
+    t29 = $[55];
   }
   const t30 = testID ? `${testID}-sheet` : undefined;
   const t31 = title ?? label;
   let t32;
-  if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
     t32 = {
       flex: 1,
       gap: 8
     };
-    $[57] = t32;
+    $[56] = t32;
   } else {
-    t32 = $[57];
+    t32 = $[56];
   }
   const t33 = theme.text.tertiary;
   const t34 = theme.primary;
   let t35;
-  if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
     t35 = inputTextStyle();
-    $[58] = t35;
+    $[57] = t35;
   } else {
-    t35 = $[58];
+    t35 = $[57];
   }
   let t36;
-  if ($[59] !== theme.text.primary) {
+  if ($[58] !== theme.text.primary) {
     t36 = [t35, {
       color: theme.text.primary
     }];
-    $[59] = theme.text.primary;
-    $[60] = t36;
+    $[58] = theme.text.primary;
+    $[59] = t36;
   } else {
-    t36 = $[60];
+    t36 = $[59];
   }
   const t37 = testID ? `${testID}-search` : undefined;
   let t38;
-  if ($[61] !== query || $[62] !== searchPlaceholder || $[63] !== t36 || $[64] !== t37 || $[65] !== theme.primary || $[66] !== theme.text.tertiary || $[67] !== updateQuery) {
+  if ($[60] !== query || $[61] !== searchPlaceholder || $[62] !== t36 || $[63] !== t37 || $[64] !== theme.primary || $[65] !== theme.text.tertiary || $[66] !== updateQuery) {
     t38 = _jsx(TextInput, {
       accessibilityLabel: searchPlaceholder,
       autoCorrect: false,
@@ -421,72 +398,72 @@ function PickerField(t0) {
       underlineColorAndroid: "transparent",
       value: query
     });
-    $[61] = query;
-    $[62] = searchPlaceholder;
-    $[63] = t36;
-    $[64] = t37;
-    $[65] = theme.primary;
-    $[66] = theme.text.tertiary;
-    $[67] = updateQuery;
-    $[68] = t38;
+    $[60] = query;
+    $[61] = searchPlaceholder;
+    $[62] = t36;
+    $[63] = t37;
+    $[64] = theme.primary;
+    $[65] = theme.text.tertiary;
+    $[66] = updateQuery;
+    $[67] = t38;
   } else {
-    t38 = $[68];
+    t38 = $[67];
   }
   let t39;
-  if ($[69] !== loading || $[70] !== theme.primary) {
+  if ($[68] !== loading || $[69] !== theme.primary) {
     t39 = loading ? _jsx(ActivityIndicator, {
       color: theme.primary
     }) : null;
-    $[69] = loading;
-    $[70] = theme.primary;
-    $[71] = t39;
+    $[68] = loading;
+    $[69] = theme.primary;
+    $[70] = t39;
   } else {
-    t39 = $[71];
+    t39 = $[70];
   }
   let t40;
-  if ($[72] !== failure) {
+  if ($[71] !== failure) {
     t40 = failure ? _jsx(Typography.Text, {
       accessibilityRole: "alert",
       className: "text-danger",
       children: failure
     }) : null;
-    $[72] = failure;
-    $[73] = t40;
+    $[71] = failure;
+    $[72] = t40;
   } else {
-    t40 = $[73];
+    t40 = $[72];
   }
   let t41;
-  if ($[74] !== emptyLabel || $[75] !== loading) {
+  if ($[73] !== emptyLabel || $[74] !== loading) {
     t41 = loading ? null : _jsx(Typography.Text, {
       className: "py-6 text-center text-text-tertiary",
       children: emptyLabel
     });
-    $[74] = emptyLabel;
-    $[75] = loading;
-    $[76] = t41;
+    $[73] = emptyLabel;
+    $[74] = loading;
+    $[75] = t41;
   } else {
-    t41 = $[76];
+    t41 = $[75];
   }
   let t42;
-  if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
     t42 = {
       disabled: true
     };
-    $[77] = t42;
+    $[76] = t42;
   } else {
-    t42 = $[77];
+    t42 = $[76];
   }
   let t43;
-  if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
     t43 = {
       flex: 1
     };
-    $[78] = t43;
+    $[77] = t43;
   } else {
-    t43 = $[78];
+    t43 = $[77];
   }
   let t44;
-  if ($[79] !== renderOption || $[80] !== results || $[81] !== t41) {
+  if ($[78] !== renderOption || $[79] !== results || $[80] !== t41) {
     t44 = _jsx(FlashList, {
       data: results,
       keyboardDismissMode: "on-drag",
@@ -497,29 +474,29 @@ function PickerField(t0) {
       renderItem: renderOption,
       style: t43
     });
-    $[79] = renderOption;
-    $[80] = results;
-    $[81] = t41;
-    $[82] = t44;
+    $[78] = renderOption;
+    $[79] = results;
+    $[80] = t41;
+    $[81] = t44;
   } else {
-    t44 = $[82];
+    t44 = $[81];
   }
   let t45;
-  if ($[83] !== t38 || $[84] !== t39 || $[85] !== t40 || $[86] !== t44) {
+  if ($[82] !== t38 || $[83] !== t39 || $[84] !== t40 || $[85] !== t44) {
     t45 = _jsxs(View, {
       style: t32,
       children: [t38, t39, t40, t44]
     });
-    $[83] = t38;
-    $[84] = t39;
-    $[85] = t40;
-    $[86] = t44;
-    $[87] = t45;
+    $[82] = t38;
+    $[83] = t39;
+    $[84] = t40;
+    $[85] = t44;
+    $[86] = t45;
   } else {
-    t45 = $[87];
+    t45 = $[86];
   }
   let t46;
-  if ($[88] !== open || $[89] !== t30 || $[90] !== t31 || $[91] !== t45) {
+  if ($[87] !== open || $[88] !== t30 || $[89] !== t31 || $[90] !== t45) {
     t46 = _jsx(Sheet, {
       onClose: close,
       scrollable: false,
@@ -529,30 +506,30 @@ function PickerField(t0) {
       visible: open,
       children: t45
     });
-    $[88] = open;
-    $[89] = t30;
-    $[90] = t31;
-    $[91] = t45;
-    $[92] = t46;
+    $[87] = open;
+    $[88] = t30;
+    $[89] = t31;
+    $[90] = t45;
+    $[91] = t46;
   } else {
-    t46 = $[92];
+    t46 = $[91];
   }
   let t47;
-  if ($[93] !== t15 || $[94] !== t16 || $[95] !== t27 || $[96] !== t28 || $[97] !== t46 || $[98] !== testID) {
+  if ($[92] !== t15 || $[93] !== t16 || $[94] !== t27 || $[95] !== t28 || $[96] !== t46 || $[97] !== testID) {
     t47 = _jsxs(View, {
       className: t15,
       testID: testID,
       children: [t16, t27, t28, t46]
     });
-    $[93] = t15;
-    $[94] = t16;
-    $[95] = t27;
-    $[96] = t28;
-    $[97] = t46;
-    $[98] = testID;
-    $[99] = t47;
-  } else {
-    t47 = $[99];
+    $[92] = t15;
+    $[93] = t16;
+    $[94] = t27;
+    $[95] = t28;
+    $[96] = t46;
+    $[97] = testID;
+    $[98] = t47;
+  } else {
+    t47 = $[98];
   }
   return t47;
 }

package/dist/Form/Form.RadioButton.d.ts

@@ -3,5 +3,6 @@ interface RadioButtonProps {
     selected: boolean;
     onPress: () => void;
 }
+/** One option of a single-choice group: the same row Select and PickerField list. */
 declare function RadioButton({ label, selected, onPress }: RadioButtonProps): import("react").JSX.Element;
 export default RadioButton;