@sincpro/mobile-ui 3.0.1 → 3.2.0

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;

package/dist/Form/Form.KeyboardToolbarHost.js

@@ -0,0 +1,223 @@
+import { c as _c } from "react/compiler-runtime";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+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. */
+const LABELS = {
+  Previous: {
+    label: "Campo anterior",
+    hint: "Mueve el foco al campo anterior"
+  },
+  Next: {
+    label: "Campo siguiente",
+    hint: "Mueve el foco al campo siguiente"
+  },
+  Done: {
+    label: "Ocultar teclado",
+    hint: "Cierra el teclado"
+  }
+};
+const ToolbarButton = t0 => {
+  const $ = _c(10);
+  const {
+    children,
+    onPress,
+    disabled: t1,
+    accessibilityLabel,
+    style,
+    testID
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  const copy = LABELS[accessibilityLabel];
+  const t2 = copy?.hint;
+  const t3 = copy?.label ?? accessibilityLabel;
+  let t4;
+  if ($[0] !== style) {
+    t4 = [styles.button, style];
+    $[0] = style;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  let t5;
+  if ($[2] !== children || $[3] !== disabled || $[4] !== onPress || $[5] !== t2 || $[6] !== t3 || $[7] !== t4 || $[8] !== testID) {
+    t5 = _jsx(Pressable, {
+      accessibilityHint: t2,
+      accessibilityLabel: t3,
+      accessibilityRole: "button",
+      disabled: disabled,
+      onPress: onPress,
+      style: t4,
+      testID: testID,
+      children: children
+    });
+    $[2] = children;
+    $[3] = disabled;
+    $[4] = onPress;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = testID;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  return t5;
+};
+
+/** keyboard-controller draws its toolbar at this height (KEYBOARD_TOOLBAR_HEIGHT). */
+const TOOLBAR_HEIGHT = 42;
+let inset = 0;
+const listeners = new Set();
+function publish(next) {
+  if (inset === next) return;
+  inset = next;
+  for (const listener of [...listeners]) listener();
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function readInset() {
+  return inset;
+}
+
+/** Space the global toolbar takes above the keyboard; 0 when it is off. */
+export function useKeyboardToolbarInset() {
+  return useSyncExternalStore(subscribe, readInset, readInset);
+}
+/**
+ * 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(t0) {
+  const $ = _c(21);
+  const {
+    doneLabel: t1,
+    ios: t2,
+    android: t3
+  } = t0;
+  const doneLabel = t1 === undefined ? "Listo" : t1;
+  const ios = t2 === undefined ? true : t2;
+  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;
+  let t6;
+  if ($[2] !== enabled) {
+    t5 = () => {
+      publish(enabled ? TOOLBAR_HEIGHT : 0);
+      return _temp;
+    };
+    t6 = [enabled];
+    $[2] = enabled;
+    $[3] = t5;
+    $[4] = t6;
+  } else {
+    t5 = $[3];
+    t6 = $[4];
+  }
+  useLayoutEffect(t5, t6);
+  if (!enabled) {
+    return null;
+  }
+  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
+    };
+    $[5] = theme.bg.card;
+    $[6] = theme.bg.muted;
+    $[7] = theme.text.accent;
+    $[8] = theme.text.disabled;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  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
+    };
+    $[12] = colors;
+    $[13] = t9;
+  } else {
+    t9 = $[13];
+  }
+  let t10;
+  if ($[14] !== doneLabel || $[15] !== t8 || $[16] !== t9) {
+    t10 = _jsx(KeyboardToolbar, {
+      button: ToolbarButton,
+      doneText: doneLabel,
+      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
+    });
+    $[18] = measureGap;
+    $[19] = t10;
+    $[20] = t11;
+  } else {
+    t11 = $[20];
+  }
+  return t11;
+}
+function _temp() {
+  return publish(0);
+}
+const styles = StyleSheet.create({
+  button: {
+    minWidth: 44,
+    minHeight: 42,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

package/dist/Form/Form.MonetaryInput.js

@@ -1,28 +1,175 @@
-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 { inputTextStyle } from "./input-text.js";
+import { useTheme } from "../theme/index.js";
 import { tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { parseToMonetaryNumber } from "../utils/monetary.js";
 import { useState } from "react";
 import { View } from "react-native";
 import CurrencyInput from "react-native-currency-input";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 const monetaryBox = tv({
-    base: "justify-center items-center bg-bg-card rounded-lg",
-    variants: {
-        focused: {
-            true: "border-2 border-border-focus",
-            false: "border border-border-default",
-        },
-    },
-    defaultVariants: { focused: false },
+  base: "justify-center items-center bg-bg-card rounded-lg",
+  variants: {
+    focused: {
+      true: "border-2 border-border-focus",
+      false: "border border-input"
+    }
+  },
+  defaultVariants: {
+    focused: false
+  }
 });
-function MonetaryInput({ amount, onChange, currencySymbol = "₡", placeholder = "Escriba el monto", }) {
-    const [raw, setRaw] = useState(parseToMonetaryNumber(amount));
-    const [isFocused, setIsFocused] = useState(false);
-    const handleChange = (amount) => {
-        setRaw(amount);
-        onChange?.(parseToMonetaryNumber(amount));
+function MonetaryInput(t0) {
+  const $ = _c(28);
+  const {
+    amount,
+    onChange,
+    currencySymbol: t1,
+    placeholder: t2
+  } = t0;
+  const currencySymbol = t1 === undefined ? "\u20A1" : t1;
+  const placeholder = t2 === undefined ? "Escriba el monto" : t2;
+  const theme = useTheme();
+  let t3;
+  if ($[0] !== amount) {
+    t3 = parseToMonetaryNumber(amount);
+    $[0] = amount;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const [raw, setRaw] = useState(t3);
+  const [isFocused, setIsFocused] = useState(false);
+  let t4;
+  if ($[2] !== onChange) {
+    t4 = amount_0 => {
+      setRaw(amount_0);
+      onChange?.(parseToMonetaryNumber(amount_0));
     };
-    return (_jsxs(View, { className: "flex-row", children: [_jsx(View, { className: monetaryBox({ focused: isFocused, className: "w-10 h-10" }), children: _jsx(Typography.Text, { className: "text-xl", variant: "body", children: currencySymbol }) }), _jsx(View, { className: monetaryBox({ focused: isFocused, className: "flex-1 h-10 ml-2 px-4" }), children: _jsx(CurrencyInput, { delimiter: ".", keyboardType: "numeric", onBlur: () => setIsFocused(false), onChangeValue: handleChange, onFocus: () => setIsFocused(true), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, separator: ",", underlineColorAndroid: "transparent", value: raw }) })] }));
+    $[2] = onChange;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  const handleChange = t4;
+  let t5;
+  if ($[4] !== isFocused) {
+    t5 = monetaryBox({
+      focused: isFocused,
+      className: "w-12 h-12"
+    });
+    $[4] = isFocused;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== currencySymbol) {
+    t6 = _jsx(Typography.Text, {
+      variant: "body",
+      children: currencySymbol
+    });
+    $[6] = currencySymbol;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] !== t5 || $[9] !== t6) {
+    t7 = _jsx(View, {
+      className: t5,
+      children: t6
+    });
+    $[8] = t5;
+    $[9] = t6;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== isFocused) {
+    t8 = monetaryBox({
+      focused: isFocused,
+      className: "flex-1 h-12 ml-2 px-4"
+    });
+    $[11] = isFocused;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = () => setIsFocused(false);
+    $[13] = t9;
+  } else {
+    t9 = $[13];
+  }
+  let t10;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = () => setIsFocused(true);
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  const t11 = theme.text.tertiary;
+  const t12 = theme.primary;
+  let t13;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = inputTextStyle();
+    $[15] = t13;
+  } else {
+    t13 = $[15];
+  }
+  let t14;
+  if ($[16] !== handleChange || $[17] !== placeholder || $[18] !== raw || $[19] !== theme.primary || $[20] !== theme.text.tertiary) {
+    t14 = _jsx(CurrencyInput, {
+      delimiter: ".",
+      keyboardType: "numeric",
+      onBlur: t9,
+      onChangeValue: handleChange,
+      onFocus: t10,
+      placeholder: placeholder,
+      placeholderTextColor: t11,
+      selectionColor: t12,
+      separator: ",",
+      style: t13,
+      underlineColorAndroid: "transparent",
+      value: raw
+    });
+    $[16] = handleChange;
+    $[17] = placeholder;
+    $[18] = raw;
+    $[19] = theme.primary;
+    $[20] = theme.text.tertiary;
+    $[21] = t14;
+  } else {
+    t14 = $[21];
+  }
+  let t15;
+  if ($[22] !== t14 || $[23] !== t8) {
+    t15 = _jsx(View, {
+      className: t8,
+      children: t14
+    });
+    $[22] = t14;
+    $[23] = t8;
+    $[24] = t15;
+  } else {
+    t15 = $[24];
+  }
+  let t16;
+  if ($[25] !== t15 || $[26] !== t7) {
+    t16 = _jsxs(View, {
+      className: "flex-row",
+      children: [t7, t15]
+    });
+    $[25] = t15;
+    $[26] = t7;
+    $[27] = t16;
+  } else {
+    t16 = $[27];
+  }
+  return t16;
 }
 export default MonetaryInput;

package/dist/Form/Form.PickerField.d.ts

@@ -0,0 +1,31 @@
+export type PickerOption<T extends string | number> = {
+    value: T;
+    label: string;
+    description?: string;
+};
+export type PickerFieldProps<T extends string | number> = {
+    label: string;
+    value: T | null;
+    onChange: (value: T, option: PickerOption<T>) => void;
+    /** Fixed options, filtered on the device by label and description. */
+    options?: readonly PickerOption<T>[];
+    /** Remote search (customers, products, Odoo name_search). Debounced; stale answers are dropped. */
+    search?: (query: string) => Promise<readonly PickerOption<T>[]>;
+    /** Shown for a value that is not in the current page of results. */
+    selectedLabel?: string;
+    placeholder?: string;
+    title?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    error?: string;
+    disabled?: boolean;
+    className?: string;
+    testID?: string;
+};
+/**
+ * A field that opens a searchable list: the "selector" pattern every business
+ * app repeats (customer, product, payment method). Local or remote options,
+ * one virtualized list, the shared overlay sheet.
+ */
+declare function PickerField<T extends string | number>({ label, value, onChange, options, search, selectedLabel, placeholder, title, searchPlaceholder, emptyLabel, error, disabled, className, testID, }: PickerFieldProps<T>): import("react").JSX.Element;
+export default PickerField;