@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Form/Form.Input.d.ts

@@ -1,11 +1,25 @@
 import type { Ref } from "react";
 import { type TextInputInstance, type TextInputProps } from "react-native";
-interface FormInputProps extends TextInputProps {
+export interface FormInputProps extends Omit<TextInputProps, "secureTextEntry"> {
     ref?: Ref<TextInputInstance>;
-    label: string;
+    label?: string;
     error?: string;
     tooltip?: string;
+    /** `card` (default) or `outline`. Same behavior; see the class tables above. */
+    look?: "card" | "outline";
+    /** Hides the text and shows a toggle to reveal it (passwords, PINs typed as text). */
+    secure?: boolean;
+    /** Classes of the wrapper (spacing, width). */
     className?: string;
 }
-declare function FormInput({ label, error, tooltip, style, multiline, numberOfLines, onFocus, onBlur, className, ref, ...props }: FormInputProps): import("react").JSX.Element;
+/**
+ * The text field of the DS. One behavior (label, focus and error states, accessibility,
+ * secure toggle) with two looks:
+ *
+ * | look      | label                  | field                                   | bottom space |
+ * | --------- | ---------------------- | --------------------------------------- | ------------ |
+ * | `card`    | bodySmall, semibold    | card surface, rounded-lg, ≥48           | 8            |
+ * | `outline` | bodyLarge              | border only, rounded, 44 high           | 16           |
+ */
+declare function FormInput({ label, error, tooltip, look, secure, style, multiline, numberOfLines, onFocus, onBlur, onSubmitEditing, submitBehavior, className, ref, ...props }: FormInputProps): import("react").JSX.Element;
 export default FormInput;

package/dist/Form/Form.Input.js

@@ -1,38 +1,506 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme/index.js";
+import { c as _c } from "react/compiler-runtime";
+import { Display } from "../Display/index.js";
+import { inputTextStyle } from "./input-text.js";
+import { useTheme } from "../theme/index.js";
 import { cn, tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useState } from "react";
-import { TextInput, View } from "react-native";
-const inputContainer = tv({
-    base: "rounded-lg bg-bg-card shadow-sm",
-    variants: {
-        state: {
-            error: "border-2 border-danger",
-            focused: "border-2 border-border-focus",
-            default: "border border-input",
-        },
-    },
-    defaultVariants: { state: "default" },
+import { TextInput, TouchableOpacity, View } from "react-native";
+import { KeyboardController } from "react-native-keyboard-controller";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+// `card`: filled surface, the default of forms built with the DS. Same box as the
+// Select, DatePicker, PickerField and Dropdown triggers.
+const cardBox = tv({
+  base: "rounded-lg bg-bg-card",
+  variants: {
+    state: {
+      error: "border-2 border-danger",
+      focused: "border-2 border-border-focus",
+      default: "border border-input"
+    }
+  },
+  defaultVariants: {
+    state: "default"
+  }
 });
-function FormInput({ label, error, tooltip, style, multiline = false, numberOfLines = 1, onFocus, onBlur, className, ref, ...props }) {
-    const [isFocused, setIsFocused] = useState(false);
-    const hasError = Boolean(error);
-    const handleFocus = (e) => {
-        setIsFocused(true);
-        onFocus?.(e);
+
+// `outline`: bordered input without surface, the look of the access forms
+// (login, server, reset). The border lives on the TextInput, so the height is 44.
+const outlineInput = tv({
+  base: "h-11 text-text-primary rounded p-2",
+  variants: {
+    state: {
+      error: "border-2 border-danger",
+      focused: "border-2 border-border-focus",
+      default: "border border-input"
+    }
+  },
+  defaultVariants: {
+    state: "default"
+  }
+});
+function SecureToggle(t0) {
+  const $ = _c(8);
+  const {
+    visible,
+    onToggle,
+    className
+  } = t0;
+  const theme = useTheme();
+  const t1 = visible ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a";
+  const t2 = visible ? "hidden" : "visibility";
+  let t3;
+  if ($[0] !== t2 || $[1] !== theme.text.primary) {
+    t3 = _jsx(Display.Icon, {
+      color: theme.text.primary,
+      name: t2,
+      size: 22
+    });
+    $[0] = t2;
+    $[1] = theme.text.primary;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== className || $[4] !== onToggle || $[5] !== t1 || $[6] !== t3) {
+    t4 = _jsx(TouchableOpacity, {
+      accessibilityLabel: t1,
+      accessibilityRole: "button",
+      className: className,
+      hitSlop: 8,
+      onPress: onToggle,
+      children: t3
+    });
+    $[3] = className;
+    $[4] = onToggle;
+    $[5] = t1;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
+}
+
+/**
+ * The text field of the DS. One behavior (label, focus and error states, accessibility,
+ * secure toggle) with two looks:
+ *
+ * | look      | label                  | field                                   | bottom space |
+ * | --------- | ---------------------- | --------------------------------------- | ------------ |
+ * | `card`    | bodySmall, semibold    | card surface, rounded-lg, ≥48           | 8            |
+ * | `outline` | bodyLarge              | border only, rounded, 44 high           | 16           |
+ */
+function FormInput(t0) {
+  const $ = _c(98);
+  let className;
+  let error;
+  let label;
+  let onBlur;
+  let onFocus;
+  let onSubmitEditing;
+  let props;
+  let ref;
+  let style;
+  let submitBehavior;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let tooltip;
+  if ($[0] !== t0) {
+    ({
+      label,
+      error,
+      tooltip,
+      look: t1,
+      secure: t2,
+      style,
+      multiline: t3,
+      numberOfLines: t4,
+      onFocus,
+      onBlur,
+      onSubmitEditing,
+      submitBehavior,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = error;
+    $[3] = label;
+    $[4] = onBlur;
+    $[5] = onFocus;
+    $[6] = onSubmitEditing;
+    $[7] = props;
+    $[8] = ref;
+    $[9] = style;
+    $[10] = submitBehavior;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = tooltip;
+  } else {
+    className = $[1];
+    error = $[2];
+    label = $[3];
+    onBlur = $[4];
+    onFocus = $[5];
+    onSubmitEditing = $[6];
+    props = $[7];
+    ref = $[8];
+    style = $[9];
+    submitBehavior = $[10];
+    t1 = $[11];
+    t2 = $[12];
+    t3 = $[13];
+    t4 = $[14];
+    tooltip = $[15];
+  }
+  const look = t1 === undefined ? "card" : t1;
+  const secure = t2 === undefined ? false : t2;
+  const multiline = t3 === undefined ? false : t3;
+  const numberOfLines = t4 === undefined ? 1 : t4;
+  const theme = useTheme();
+  const [isFocused, setIsFocused] = useState(false);
+  const [revealed, setRevealed] = useState(false);
+  const hasError = Boolean(error);
+  const state = hasError ? "error" : isFocused ? "focused" : "default";
+  let t5;
+  if ($[16] !== onFocus) {
+    t5 = e => {
+      setIsFocused(true);
+      onFocus?.(e);
     };
-    const handleBlur = (e) => {
-        setIsFocused(false);
-        onBlur?.(e);
+    $[16] = onFocus;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  const handleFocus = t5;
+  let t6;
+  if ($[18] !== onBlur) {
+    t6 = e_0 => {
+      setIsFocused(false);
+      onBlur?.(e_0);
     };
-    const getState = () => {
-        if (hasError)
-            return "error";
-        if (isFocused)
-            return "focused";
-        return "default";
+    $[18] = onBlur;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  const handleBlur = t6;
+  let t7;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = () => setRevealed(_temp);
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  const toggle = t7;
+  const advances = props.returnKeyType === "next" && !multiline && !onSubmitEditing;
+  const t8 = error || tooltip;
+  const t9 = advances ? _temp2 : onSubmitEditing;
+  const t10 = advances ? "submit" : submitBehavior;
+  const t11 = secure && !revealed;
+  let t12;
+  if ($[21] !== handleBlur || $[22] !== handleFocus || $[23] !== label || $[24] !== ref || $[25] !== t10 || $[26] !== t11 || $[27] !== t8 || $[28] !== t9 || $[29] !== theme.primary || $[30] !== theme.text.tertiary) {
+    t12 = {
+      accessibilityHint: t8,
+      accessibilityLabel: label,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onSubmitEditing: t9,
+      submitBehavior: t10,
+      placeholderTextColor: theme.text.tertiary,
+      ref,
+      secureTextEntry: t11,
+      selectionColor: theme.primary,
+      underlineColorAndroid: "transparent"
     };
-    return (_jsxs(View, { className: cn("mb-2", className), children: [_jsx(Typography.Text, { className: "mb-1 font-medium text-text-primary", variant: "bodySmall", children: label }), _jsx(View, { className: inputContainer({ state: getState() }), children: _jsx(TextInput, { accessibilityHint: error || tooltip, accessibilityLabel: label, className: cn("px-3 py-2.5 text-sm min-h-[48px] text-text-primary", multiline && "min-h-[64px] pt-2.5"), multiline: multiline, numberOfLines: numberOfLines, onBlur: handleBlur, onFocus: handleFocus, placeholderTextColor: theme.text.tertiary, ref: ref, selectionColor: theme.primary, style: [{ minHeight: multiline ? 64 : 48 }, style], textAlignVertical: multiline ? "top" : "center", underlineColorAndroid: "transparent", ...props }) }), hasError && (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "mt-0.5 text-danger", variant: "bodySmall", children: error }))] }));
+    $[21] = handleBlur;
+    $[22] = handleFocus;
+    $[23] = label;
+    $[24] = ref;
+    $[25] = t10;
+    $[26] = t11;
+    $[27] = t8;
+    $[28] = t9;
+    $[29] = theme.primary;
+    $[30] = theme.text.tertiary;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  const shared = t12;
+  let t13;
+  if ($[32] !== error || $[33] !== hasError || $[34] !== look) {
+    t13 = hasError ? _jsx(Typography.Text, {
+      accessibilityLiveRegion: "polite",
+      className: look === "card" ? "mt-0.5 text-danger" : "mt-1 text-danger",
+      variant: "bodySmall",
+      children: error
+    }) : null;
+    $[32] = error;
+    $[33] = hasError;
+    $[34] = look;
+    $[35] = t13;
+  } else {
+    t13 = $[35];
+  }
+  const errorText = t13;
+  if (look === "outline") {
+    let t14;
+    if ($[36] !== className) {
+      t14 = cn("mb-4", className);
+      $[36] = className;
+      $[37] = t14;
+    } else {
+      t14 = $[37];
+    }
+    let t15;
+    if ($[38] !== label) {
+      t15 = label ? _jsx(Typography.Text, {
+        className: "mb-1",
+        variant: "bodyLarge",
+        children: label
+      }) : null;
+      $[38] = label;
+      $[39] = t15;
+    } else {
+      t15 = $[39];
+    }
+    let t16;
+    if ($[40] !== state) {
+      t16 = outlineInput({
+        state
+      });
+      $[40] = state;
+      $[41] = t16;
+    } else {
+      t16 = $[41];
+    }
+    let t17;
+    if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+      t17 = inputTextStyle();
+      $[42] = t17;
+    } else {
+      t17 = $[42];
+    }
+    let t18;
+    if ($[43] !== style) {
+      t18 = [t17, style];
+      $[43] = style;
+      $[44] = t18;
+    } else {
+      t18 = $[44];
+    }
+    let t19;
+    if ($[45] !== multiline || $[46] !== numberOfLines || $[47] !== props || $[48] !== shared || $[49] !== t16 || $[50] !== t18) {
+      t19 = _jsx(TextInput, {
+        className: t16,
+        multiline: multiline,
+        numberOfLines: numberOfLines,
+        style: t18,
+        ...shared,
+        ...props
+      });
+      $[45] = multiline;
+      $[46] = numberOfLines;
+      $[47] = props;
+      $[48] = shared;
+      $[49] = t16;
+      $[50] = t18;
+      $[51] = t19;
+    } else {
+      t19 = $[51];
+    }
+    let t20;
+    if ($[52] !== errorText || $[53] !== t14 || $[54] !== t15 || $[55] !== t19) {
+      t20 = _jsxs(View, {
+        className: t14,
+        children: [t15, t19, errorText]
+      });
+      $[52] = errorText;
+      $[53] = t14;
+      $[54] = t15;
+      $[55] = t19;
+      $[56] = t20;
+    } else {
+      t20 = $[56];
+    }
+    const field = t20;
+    if (!secure) {
+      return field;
+    }
+    let t21;
+    if ($[57] !== revealed) {
+      t21 = _jsx(SecureToggle, {
+        className: "absolute right-3 bottom-[25px]",
+        onToggle: toggle,
+        visible: revealed
+      });
+      $[57] = revealed;
+      $[58] = t21;
+    } else {
+      t21 = $[58];
+    }
+    let t22;
+    if ($[59] !== field || $[60] !== t21) {
+      t22 = _jsxs(View, {
+        className: "mb-4 relative",
+        children: [field, t21]
+      });
+      $[59] = field;
+      $[60] = t21;
+      $[61] = t22;
+    } else {
+      t22 = $[61];
+    }
+    return t22;
+  }
+  let t14;
+  if ($[62] !== className) {
+    t14 = cn("mb-2", className);
+    $[62] = className;
+    $[63] = t14;
+  } else {
+    t14 = $[63];
+  }
+  let t15;
+  if ($[64] !== label) {
+    t15 = label ? _jsx(Typography.Text, {
+      className: "mb-1 text-text-primary",
+      semibold: true,
+      variant: "bodySmall",
+      children: label
+    }) : null;
+    $[64] = label;
+    $[65] = t15;
+  } else {
+    t15 = $[65];
+  }
+  let t16;
+  if ($[66] !== secure || $[67] !== state) {
+    t16 = cn(cardBox({
+      state
+    }), secure && "flex-row items-center");
+    $[66] = secure;
+    $[67] = state;
+    $[68] = t16;
+  } else {
+    t16 = $[68];
+  }
+  const t17 = multiline && "min-h-[64px] pt-2.5";
+  const t18 = secure && "flex-1";
+  let t19;
+  if ($[69] !== t17 || $[70] !== t18) {
+    t19 = cn("px-3 py-2.5 min-h-[48px] text-text-primary", t17, t18);
+    $[69] = t17;
+    $[70] = t18;
+    $[71] = t19;
+  } else {
+    t19 = $[71];
+  }
+  let t20;
+  if ($[72] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = inputTextStyle();
+    $[72] = t20;
+  } else {
+    t20 = $[72];
+  }
+  const t21 = multiline ? 64 : 48;
+  let t22;
+  if ($[73] !== t21) {
+    t22 = {
+      minHeight: t21
+    };
+    $[73] = t21;
+    $[74] = t22;
+  } else {
+    t22 = $[74];
+  }
+  let t23;
+  if ($[75] !== style || $[76] !== t22) {
+    t23 = [t20, t22, style];
+    $[75] = style;
+    $[76] = t22;
+    $[77] = t23;
+  } else {
+    t23 = $[77];
+  }
+  const t24 = multiline ? "top" : "center";
+  let t25;
+  if ($[78] !== multiline || $[79] !== numberOfLines || $[80] !== props || $[81] !== shared || $[82] !== t19 || $[83] !== t23 || $[84] !== t24) {
+    t25 = _jsx(TextInput, {
+      className: t19,
+      multiline: multiline,
+      numberOfLines: numberOfLines,
+      style: t23,
+      textAlignVertical: t24,
+      ...shared,
+      ...props
+    });
+    $[78] = multiline;
+    $[79] = numberOfLines;
+    $[80] = props;
+    $[81] = shared;
+    $[82] = t19;
+    $[83] = t23;
+    $[84] = t24;
+    $[85] = t25;
+  } else {
+    t25 = $[85];
+  }
+  let t26;
+  if ($[86] !== revealed || $[87] !== secure) {
+    t26 = secure ? _jsx(SecureToggle, {
+      className: "px-3",
+      onToggle: toggle,
+      visible: revealed
+    }) : null;
+    $[86] = revealed;
+    $[87] = secure;
+    $[88] = t26;
+  } else {
+    t26 = $[88];
+  }
+  let t27;
+  if ($[89] !== t16 || $[90] !== t25 || $[91] !== t26) {
+    t27 = _jsxs(View, {
+      className: t16,
+      children: [t25, t26]
+    });
+    $[89] = t16;
+    $[90] = t25;
+    $[91] = t26;
+    $[92] = t27;
+  } else {
+    t27 = $[92];
+  }
+  let t28;
+  if ($[93] !== errorText || $[94] !== t14 || $[95] !== t15 || $[96] !== t27) {
+    t28 = _jsxs(View, {
+      className: t14,
+      children: [t15, t27, errorText]
+    });
+    $[93] = errorText;
+    $[94] = t14;
+    $[95] = t15;
+    $[96] = t27;
+    $[97] = t28;
+  } else {
+    t28 = $[97];
+  }
+  return t28;
+}
+function _temp2() {
+  return KeyboardController.setFocusTo("next");
+}
+function _temp(value) {
+  return !value;
 }
 export default FormInput;

package/dist/Form/Form.KeyboardForm.d.ts

@@ -1,11 +1,25 @@
-import { type KeyboardToolbarProps } from "./Form.KeyboardToolbar.js";
-import { type ReactNode, type Ref } from "react";
-import type { KeyboardAwareScrollViewProps, KeyboardAwareScrollViewRef } from "react-native-keyboard-controller";
-export interface KeyboardFormProps extends KeyboardAwareScrollViewProps {
+import type { ReactElement, ReactNode } from "react";
+import { type RefreshControlProps, type StyleProp, type ViewStyle } from "react-native";
+export interface KeyboardFormProps {
     children: ReactNode;
-    ref?: Ref<KeyboardAwareScrollViewRef>;
-    toolbar?: boolean;
+    /** Overrides the computed space below the focused input. */
+    bottomOffset?: number;
+    /** Height of a footer that stays above the keyboard, such as a sticky action bar. */
     stickyFooterHeight?: number;
-    toolbarProps?: Omit<KeyboardToolbarProps, "onHeightChange">;
+    style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    className?: string;
+    contentContainerClassName?: string;
+    keyboardShouldPersistTaps?: "always" | "handled" | "never";
+    showsVerticalScrollIndicator?: boolean;
+    bounces?: boolean;
+    refreshControl?: ReactElement<RefreshControlProps>;
+    /** iOS: let the system inset the content under large titles and NativeTabs. */
+    contentInsetAdjustmentBehavior?: "automatic" | "never";
+    testID?: string;
 }
-export default function KeyboardForm({ children, toolbar, stickyFooterHeight, toolbarProps, bottomOffset, style, ...props }: KeyboardFormProps): import("react").JSX.Element;
+/**
+ * The one keyboard-aware scroll of a form. Its inputs form a toolbar group, so
+ * the global KeyboardToolbarHost moves focus only among them.
+ */
+export default function KeyboardForm({ children, bottomOffset, stickyFooterHeight, style, keyboardShouldPersistTaps, ...scroll }: KeyboardFormProps): import("react").JSX.Element;

package/dist/Form/Form.KeyboardForm.js

@@ -1,9 +1,84 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import KeyboardToolbar from "./Form.KeyboardToolbar.js";
-import { useState } from "react";
-import { View } from "react-native";
-import { KeyboardAwareScrollView, KeyboardToolbar as NativeToolbar, } from "react-native-keyboard-controller";
-export default function KeyboardForm({ children, toolbar = true, stickyFooterHeight = 0, toolbarProps, bottomOffset, style, ...props }) {
-    const [toolbarHeight, setToolbarHeight] = useState(48);
-    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(NativeToolbar.Group, { style: { flex: 1 }, children: _jsx(KeyboardAwareScrollView, { bottomOffset: bottomOffset ?? stickyFooterHeight + (toolbar ? toolbarHeight + 24 : 24), keyboardShouldPersistTaps: "handled", style: [{ flex: 1 }, style], ...props, children: children }) }), toolbar ? (_jsx(KeyboardToolbar, { ...toolbarProps, bottomGapOffset: -stickyFooterHeight, onHeightChange: setToolbarHeight })) : null] }));
+import { c as _c } from "react/compiler-runtime";
+import { useKeyboardToolbarInset } from "./Form.KeyboardToolbarHost.js";
+import { StyleSheet } from "react-native";
+import { KeyboardAwareScrollView, KeyboardToolbar } from "react-native-keyboard-controller";
+
+/** Space kept between the focused input and whatever sits above the keyboard. */
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+const FOCUS_GAP = 24;
+/**
+ * The one keyboard-aware scroll of a form. Its inputs form a toolbar group, so
+ * the global KeyboardToolbarHost moves focus only among them.
+ */
+export default function KeyboardForm(t0) {
+  const $ = _c(15);
+  let bottomOffset;
+  let children;
+  let scroll;
+  let style;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      children,
+      bottomOffset,
+      stickyFooterHeight: t1,
+      style,
+      keyboardShouldPersistTaps: t2,
+      ...scroll
+    } = t0);
+    $[0] = t0;
+    $[1] = bottomOffset;
+    $[2] = children;
+    $[3] = scroll;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    bottomOffset = $[1];
+    children = $[2];
+    scroll = $[3];
+    style = $[4];
+    t1 = $[5];
+    t2 = $[6];
+  }
+  const stickyFooterHeight = t1 === undefined ? 0 : t1;
+  const keyboardShouldPersistTaps = t2 === undefined ? "handled" : t2;
+  const toolbarInset = useKeyboardToolbarInset();
+  const t3 = bottomOffset ?? stickyFooterHeight + toolbarInset + FOCUS_GAP;
+  let t4;
+  if ($[7] !== style) {
+    t4 = [styles.fill, style];
+    $[7] = style;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== children || $[10] !== keyboardShouldPersistTaps || $[11] !== scroll || $[12] !== t3 || $[13] !== t4) {
+    t5 = _jsx(KeyboardToolbar.Group, {
+      style: styles.fill,
+      children: _jsx(KeyboardAwareScrollView, {
+        bottomOffset: t3,
+        keyboardShouldPersistTaps: keyboardShouldPersistTaps,
+        style: t4,
+        ...scroll,
+        children: children
+      })
+    });
+    $[9] = children;
+    $[10] = keyboardShouldPersistTaps;
+    $[11] = scroll;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
 }
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  }
+});