@sincpro/mobile-ui 3.0.1 → 3.1.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, className, ref, ...props }: FormInputProps): import("react").JSX.Element;
 export default FormInput;

package/dist/Form/Form.Input.js

@@ -1,38 +1,487 @@
-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 { 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"
+  }
+});
+
+// `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 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);
+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(94);
+  let className;
+  let error;
+  let label;
+  let onBlur;
+  let onFocus;
+  let props;
+  let ref;
+  let style;
+  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,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = error;
+    $[3] = label;
+    $[4] = onBlur;
+    $[5] = onFocus;
+    $[6] = props;
+    $[7] = ref;
+    $[8] = style;
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+    $[13] = tooltip;
+  } else {
+    className = $[1];
+    error = $[2];
+    label = $[3];
+    onBlur = $[4];
+    onFocus = $[5];
+    props = $[6];
+    ref = $[7];
+    style = $[8];
+    t1 = $[9];
+    t2 = $[10];
+    t3 = $[11];
+    t4 = $[12];
+    tooltip = $[13];
+  }
+  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 ($[14] !== onFocus) {
+    t5 = e => {
+      setIsFocused(true);
+      onFocus?.(e);
+    };
+    $[14] = onFocus;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  const handleFocus = t5;
+  let t6;
+  if ($[16] !== onBlur) {
+    t6 = e_0 => {
+      setIsFocused(false);
+      onBlur?.(e_0);
     };
-    const handleBlur = (e) => {
-        setIsFocused(false);
-        onBlur?.(e);
+    $[16] = onBlur;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  const handleBlur = t6;
+  let t7;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = () => setRevealed(_temp);
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  const toggle = t7;
+  const t8 = error || tooltip;
+  const t9 = secure && !revealed;
+  let t10;
+  if ($[19] !== handleBlur || $[20] !== handleFocus || $[21] !== label || $[22] !== ref || $[23] !== t8 || $[24] !== t9 || $[25] !== theme.primary || $[26] !== theme.text.tertiary) {
+    t10 = {
+      accessibilityHint: t8,
+      accessibilityLabel: label,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      placeholderTextColor: theme.text.tertiary,
+      ref,
+      secureTextEntry: t9,
+      selectionColor: theme.primary,
+      underlineColorAndroid: "transparent"
     };
-    const getState = () => {
-        if (hasError)
-            return "error";
-        if (isFocused)
-            return "focused";
-        return "default";
+    $[19] = handleBlur;
+    $[20] = handleFocus;
+    $[21] = label;
+    $[22] = ref;
+    $[23] = t8;
+    $[24] = t9;
+    $[25] = theme.primary;
+    $[26] = theme.text.tertiary;
+    $[27] = t10;
+  } else {
+    t10 = $[27];
+  }
+  const shared = t10;
+  let t11;
+  if ($[28] !== error || $[29] !== hasError || $[30] !== look) {
+    t11 = hasError ? _jsx(Typography.Text, {
+      accessibilityLiveRegion: "polite",
+      className: look === "card" ? "mt-0.5 text-danger" : "mt-1 text-danger",
+      variant: "bodySmall",
+      children: error
+    }) : null;
+    $[28] = error;
+    $[29] = hasError;
+    $[30] = look;
+    $[31] = t11;
+  } else {
+    t11 = $[31];
+  }
+  const errorText = t11;
+  if (look === "outline") {
+    let t12;
+    if ($[32] !== className) {
+      t12 = cn("mb-4", className);
+      $[32] = className;
+      $[33] = t12;
+    } else {
+      t12 = $[33];
+    }
+    let t13;
+    if ($[34] !== label) {
+      t13 = label ? _jsx(Typography.Text, {
+        className: "mb-1",
+        variant: "bodyLarge",
+        children: label
+      }) : null;
+      $[34] = label;
+      $[35] = t13;
+    } else {
+      t13 = $[35];
+    }
+    let t14;
+    if ($[36] !== state) {
+      t14 = outlineInput({
+        state
+      });
+      $[36] = state;
+      $[37] = t14;
+    } else {
+      t14 = $[37];
+    }
+    let t15;
+    if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+      t15 = inputTextStyle();
+      $[38] = t15;
+    } else {
+      t15 = $[38];
+    }
+    let t16;
+    if ($[39] !== style) {
+      t16 = [t15, style];
+      $[39] = style;
+      $[40] = t16;
+    } else {
+      t16 = $[40];
+    }
+    let t17;
+    if ($[41] !== multiline || $[42] !== numberOfLines || $[43] !== props || $[44] !== shared || $[45] !== t14 || $[46] !== t16) {
+      t17 = _jsx(TextInput, {
+        className: t14,
+        multiline: multiline,
+        numberOfLines: numberOfLines,
+        style: t16,
+        ...shared,
+        ...props
+      });
+      $[41] = multiline;
+      $[42] = numberOfLines;
+      $[43] = props;
+      $[44] = shared;
+      $[45] = t14;
+      $[46] = t16;
+      $[47] = t17;
+    } else {
+      t17 = $[47];
+    }
+    let t18;
+    if ($[48] !== errorText || $[49] !== t12 || $[50] !== t13 || $[51] !== t17) {
+      t18 = _jsxs(View, {
+        className: t12,
+        children: [t13, t17, errorText]
+      });
+      $[48] = errorText;
+      $[49] = t12;
+      $[50] = t13;
+      $[51] = t17;
+      $[52] = t18;
+    } else {
+      t18 = $[52];
+    }
+    const field = t18;
+    if (!secure) {
+      return field;
+    }
+    let t19;
+    if ($[53] !== revealed) {
+      t19 = _jsx(SecureToggle, {
+        className: "absolute right-3 bottom-[25px]",
+        onToggle: toggle,
+        visible: revealed
+      });
+      $[53] = revealed;
+      $[54] = t19;
+    } else {
+      t19 = $[54];
+    }
+    let t20;
+    if ($[55] !== field || $[56] !== t19) {
+      t20 = _jsxs(View, {
+        className: "mb-4 relative",
+        children: [field, t19]
+      });
+      $[55] = field;
+      $[56] = t19;
+      $[57] = t20;
+    } else {
+      t20 = $[57];
+    }
+    return t20;
+  }
+  let t12;
+  if ($[58] !== className) {
+    t12 = cn("mb-2", className);
+    $[58] = className;
+    $[59] = t12;
+  } else {
+    t12 = $[59];
+  }
+  let t13;
+  if ($[60] !== label) {
+    t13 = label ? _jsx(Typography.Text, {
+      className: "mb-1 text-text-primary",
+      semibold: true,
+      variant: "bodySmall",
+      children: label
+    }) : null;
+    $[60] = label;
+    $[61] = t13;
+  } else {
+    t13 = $[61];
+  }
+  let t14;
+  if ($[62] !== secure || $[63] !== state) {
+    t14 = cn(cardBox({
+      state
+    }), secure && "flex-row items-center");
+    $[62] = secure;
+    $[63] = state;
+    $[64] = t14;
+  } else {
+    t14 = $[64];
+  }
+  const t15 = multiline && "min-h-[64px] pt-2.5";
+  const t16 = secure && "flex-1";
+  let t17;
+  if ($[65] !== t15 || $[66] !== t16) {
+    t17 = cn("px-3 py-2.5 min-h-[48px] text-text-primary", t15, t16);
+    $[65] = t15;
+    $[66] = t16;
+    $[67] = t17;
+  } else {
+    t17 = $[67];
+  }
+  let t18;
+  if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
+    t18 = inputTextStyle();
+    $[68] = t18;
+  } else {
+    t18 = $[68];
+  }
+  const t19 = multiline ? 64 : 48;
+  let t20;
+  if ($[69] !== t19) {
+    t20 = {
+      minHeight: t19
     };
-    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 }))] }));
+    $[69] = t19;
+    $[70] = t20;
+  } else {
+    t20 = $[70];
+  }
+  let t21;
+  if ($[71] !== style || $[72] !== t20) {
+    t21 = [t18, t20, style];
+    $[71] = style;
+    $[72] = t20;
+    $[73] = t21;
+  } else {
+    t21 = $[73];
+  }
+  const t22 = multiline ? "top" : "center";
+  let t23;
+  if ($[74] !== multiline || $[75] !== numberOfLines || $[76] !== props || $[77] !== shared || $[78] !== t17 || $[79] !== t21 || $[80] !== t22) {
+    t23 = _jsx(TextInput, {
+      className: t17,
+      multiline: multiline,
+      numberOfLines: numberOfLines,
+      style: t21,
+      textAlignVertical: t22,
+      ...shared,
+      ...props
+    });
+    $[74] = multiline;
+    $[75] = numberOfLines;
+    $[76] = props;
+    $[77] = shared;
+    $[78] = t17;
+    $[79] = t21;
+    $[80] = t22;
+    $[81] = t23;
+  } else {
+    t23 = $[81];
+  }
+  let t24;
+  if ($[82] !== revealed || $[83] !== secure) {
+    t24 = secure ? _jsx(SecureToggle, {
+      className: "px-3",
+      onToggle: toggle,
+      visible: revealed
+    }) : null;
+    $[82] = revealed;
+    $[83] = secure;
+    $[84] = t24;
+  } else {
+    t24 = $[84];
+  }
+  let t25;
+  if ($[85] !== t14 || $[86] !== t23 || $[87] !== t24) {
+    t25 = _jsxs(View, {
+      className: t14,
+      children: [t23, t24]
+    });
+    $[85] = t14;
+    $[86] = t23;
+    $[87] = t24;
+    $[88] = t25;
+  } else {
+    t25 = $[88];
+  }
+  let t26;
+  if ($[89] !== errorText || $[90] !== t12 || $[91] !== t13 || $[92] !== t25) {
+    t26 = _jsxs(View, {
+      className: t12,
+      children: [t13, t25, errorText]
+    });
+    $[89] = errorText;
+    $[90] = t12;
+    $[91] = t13;
+    $[92] = t25;
+    $[93] = t26;
+  } else {
+    t26 = $[93];
+  }
+  return t26;
+}
+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
+  }
+});

package/dist/Form/Form.KeyboardToolbarHost.d.ts

@@ -0,0 +1,14 @@
+/** Space the global toolbar takes above the keyboard; 0 when it is off. */
+export declare function useKeyboardToolbarInset(): number;
+export interface KeyboardToolbarHostProps {
+    doneLabel?: string;
+    /** iOS convention: an accessory bar with previous / next / done. */
+    ios?: boolean;
+    /** Android convention is the IME action key; the bar is opt-in. */
+    android?: boolean;
+}
+/**
+ * The only keyboard toolbar of the app. Mount it once inside KeyboardProvider.
+ * Each KeyboardForm and each sheet is a group, so previous / next stay inside it.
+ */
+export default function KeyboardToolbarHost({ doneLabel, ios, android, }: KeyboardToolbarHostProps): import("react").JSX.Element | null;