@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/Dialog/SheetSurface.js

@@ -0,0 +1,441 @@
+import { c as _c } from "react/compiler-runtime";
+import { useTheme } from "../theme/index.js";
+import { SCRIM } from "../theme/on-dark-surface.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
+import { useEffect, useEffectEvent } from "react";
+import { Pressable, StyleSheet, useWindowDimensions, View } from "react-native";
+import { GestureDetector, usePanGesture } from "react-native-gesture-handler";
+import { KeyboardToolbar, useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
+import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { scheduleOnRN } from "react-native-worklets";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+const DURATION_MS = 260;
+const CLOSE_VELOCITY = 900;
+const MIN_CONTENT_ABOVE_KEYBOARD = 240;
+export function resolveSnapPoint(point, windowHeight) {
+  if (typeof point === "number") return point;
+  const percent = Number.parseFloat(point);
+  return Number.isFinite(percent) ? windowHeight * percent / 100 : windowHeight * 0.6;
+}
+/**
+ * Bottom sheet drawn in the app window. While it exits it ignores touches,
+ * so a tap during the close animation never lands on a view that unmounts.
+ */
+export function SheetSurface(t0) {
+  const $ = _c(89);
+  const {
+    visible,
+    snapPoints,
+    dismissible,
+    onRequestClose,
+    onExited,
+    header,
+    footer,
+    children,
+    testID
+  } = t0;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const {
+    height: windowHeight
+  } = useWindowDimensions();
+  const reducedMotion = useReducedMotion();
+  const keyboard = useReanimatedKeyboardAnimation();
+  const ceiling = windowHeight - insets.top - 8;
+  let panelHeight;
+  let t1;
+  if ($[0] !== ceiling || $[1] !== snapPoints || $[2] !== windowHeight) {
+    let t2;
+    if ($[5] !== ceiling || $[6] !== windowHeight) {
+      t2 = point => Math.min(resolveSnapPoint(point, windowHeight), ceiling);
+      $[5] = ceiling;
+      $[6] = windowHeight;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    const snaps = snapPoints.map(t2).sort(_temp);
+    panelHeight = snaps[snaps.length - 1] ?? windowHeight * 0.6;
+    t1 = snaps.map(snap => panelHeight - snap).sort(_temp2);
+    $[0] = ceiling;
+    $[1] = snapPoints;
+    $[2] = windowHeight;
+    $[3] = panelHeight;
+    $[4] = t1;
+  } else {
+    panelHeight = $[3];
+    t1 = $[4];
+  }
+  const offsets = t1;
+  const restOffset = offsets[0] ?? 0;
+  const hiddenOffset = panelHeight + insets.bottom;
+  const duration = reducedMotion ? 0 : DURATION_MS;
+  const translateY = useSharedValue(hiddenOffset);
+  const dragStart = useSharedValue(0);
+  let t2;
+  if ($[8] !== onExited) {
+    t2 = () => onExited();
+    $[8] = onExited;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const exited = useEffectEvent(t2);
+  let t3;
+  if ($[10] !== duration || $[11] !== exited || $[12] !== hiddenOffset || $[13] !== restOffset || $[14] !== translateY || $[15] !== visible) {
+    t3 = () => {
+      if (visible) {
+        translateY.set(withTiming(restOffset, {
+          duration,
+          easing: Easing.out(Easing.cubic)
+        }));
+        return;
+      }
+      translateY.set(withTiming(hiddenOffset, {
+        duration,
+        easing: Easing.in(Easing.cubic)
+      }));
+      if (duration === 0) {
+        exited();
+        return;
+      }
+      const timer = setTimeout(() => exited(), duration);
+      return () => clearTimeout(timer);
+    };
+    $[10] = duration;
+    $[11] = exited;
+    $[12] = hiddenOffset;
+    $[13] = restOffset;
+    $[14] = translateY;
+    $[15] = visible;
+    $[16] = t3;
+  } else {
+    t3 = $[16];
+  }
+  let t4;
+  if ($[17] !== duration || $[18] !== hiddenOffset || $[19] !== restOffset || $[20] !== translateY || $[21] !== visible) {
+    t4 = [visible, restOffset, hiddenOffset, duration, translateY];
+    $[17] = duration;
+    $[18] = hiddenOffset;
+    $[19] = restOffset;
+    $[20] = translateY;
+    $[21] = visible;
+    $[22] = t4;
+  } else {
+    t4 = $[22];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[23] !== dismissible || $[24] !== onRequestClose || $[25] !== visible) {
+    t5 = () => {
+      if (visible && dismissible) {
+        onRequestClose();
+      }
+    };
+    $[23] = dismissible;
+    $[24] = onRequestClose;
+    $[25] = visible;
+    $[26] = t5;
+  } else {
+    t5 = $[26];
+  }
+  const requestClose = t5;
+  let t6;
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = [-8, 8];
+    $[27] = t6;
+  } else {
+    t6 = $[27];
+  }
+  let t7;
+  if ($[28] !== dragStart || $[29] !== translateY) {
+    t7 = () => {
+      "worklet";
+
+      dragStart.set(translateY.get());
+    };
+    $[28] = dragStart;
+    $[29] = translateY;
+    $[30] = t7;
+  } else {
+    t7 = $[30];
+  }
+  let t8;
+  if ($[31] !== dismissible || $[32] !== dragStart || $[33] !== hiddenOffset || $[34] !== restOffset || $[35] !== translateY) {
+    t8 = event => {
+      "worklet";
+
+      const lowest = dismissible ? hiddenOffset : restOffset + 40;
+      translateY.set(Math.min(Math.max(dragStart.get() + event.translationY, 0), lowest));
+    };
+    $[31] = dismissible;
+    $[32] = dragStart;
+    $[33] = hiddenOffset;
+    $[34] = restOffset;
+    $[35] = translateY;
+    $[36] = t8;
+  } else {
+    t8 = $[36];
+  }
+  let t9;
+  if ($[37] !== dismissible || $[38] !== offsets || $[39] !== onRequestClose || $[40] !== panelHeight || $[41] !== restOffset || $[42] !== translateY) {
+    t9 = event_0 => {
+      "worklet";
+
+      const position = translateY.get();
+      const pastRest = position - restOffset;
+      const closing = dismissible && (event_0.velocityY > CLOSE_VELOCITY || pastRest > (panelHeight - restOffset) * 0.35);
+      if (closing) {
+        scheduleOnRN(onRequestClose);
+        return;
+      }
+      let target = offsets[0] ?? 0;
+      for (const offset of offsets) {
+        if (Math.abs(offset - position) < Math.abs(target - position)) {
+          target = offset;
+        }
+      }
+      translateY.set(withTiming(target, {
+        duration: DURATION_MS
+      }));
+    };
+    $[37] = dismissible;
+    $[38] = offsets;
+    $[39] = onRequestClose;
+    $[40] = panelHeight;
+    $[41] = restOffset;
+    $[42] = translateY;
+    $[43] = t9;
+  } else {
+    t9 = $[43];
+  }
+  let t10;
+  if ($[44] !== t7 || $[45] !== t8 || $[46] !== t9) {
+    t10 = {
+      activeOffsetY: t6,
+      onActivate: t7,
+      onUpdate: t8,
+      onDeactivate: t9
+    };
+    $[44] = t7;
+    $[45] = t8;
+    $[46] = t9;
+    $[47] = t10;
+  } else {
+    t10 = $[47];
+  }
+  const pan = usePanGesture(t10);
+  const panelStyle = useAnimatedStyle(() => {
+    const lifted = Math.abs(keyboard.height.get());
+    const height = lifted > 0 ? Math.max(panelHeight, Math.min(ceiling, lifted + MIN_CONTENT_ABOVE_KEYBOARD)) : panelHeight;
+    return {
+      height,
+      paddingBottom: Math.max(insets.bottom, lifted),
+      transform: [{
+        translateY: translateY.get()
+      }]
+    };
+  });
+  const footerStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: -Math.min(translateY.get(), restOffset)
+    }]
+  }));
+  const backdropStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(translateY.get(), [restOffset, hiddenOffset], [1, 0], "clamp")
+  }));
+  const t11 = visible ? "box-none" : "none";
+  let t12;
+  if ($[48] !== backdropStyle) {
+    t12 = [StyleSheet.absoluteFill, styles.backdrop, backdropStyle];
+    $[48] = backdropStyle;
+    $[49] = t12;
+  } else {
+    t12 = $[49];
+  }
+  const t13 = dismissible ? "Cerrar" : undefined;
+  const t14 = dismissible ? "button" : undefined;
+  const t15 = testID ? `${testID}-backdrop` : undefined;
+  let t16;
+  if ($[50] !== dismissible || $[51] !== requestClose || $[52] !== t13 || $[53] !== t14 || $[54] !== t15) {
+    t16 = _jsx(Pressable, {
+      accessibilityLabel: t13,
+      accessibilityRole: t14,
+      accessible: dismissible,
+      onPress: requestClose,
+      style: StyleSheet.absoluteFill,
+      testID: t15
+    });
+    $[50] = dismissible;
+    $[51] = requestClose;
+    $[52] = t13;
+    $[53] = t14;
+    $[54] = t15;
+    $[55] = t16;
+  } else {
+    t16 = $[55];
+  }
+  let t17;
+  if ($[56] !== t12 || $[57] !== t16) {
+    t17 = _jsx(Animated.View, {
+      style: t12,
+      children: t16
+    });
+    $[56] = t12;
+    $[57] = t16;
+    $[58] = t17;
+  } else {
+    t17 = $[58];
+  }
+  let t18;
+  if ($[59] !== theme.bg.card) {
+    t18 = {
+      backgroundColor: theme.bg.card
+    };
+    $[59] = theme.bg.card;
+    $[60] = t18;
+  } else {
+    t18 = $[60];
+  }
+  let t19;
+  if ($[61] !== panelStyle || $[62] !== t18) {
+    t19 = [styles.panel, t18, panelStyle];
+    $[61] = panelStyle;
+    $[62] = t18;
+    $[63] = t19;
+  } else {
+    t19 = $[63];
+  }
+  let t20;
+  if ($[64] !== theme.border.default) {
+    t20 = _jsx(View, {
+      style: [styles.handle, {
+        backgroundColor: theme.border.default
+      }]
+    });
+    $[64] = theme.border.default;
+    $[65] = t20;
+  } else {
+    t20 = $[65];
+  }
+  let t21;
+  if ($[66] !== header || $[67] !== t20) {
+    t21 = _jsxs(View, {
+      style: styles.handleArea,
+      children: [t20, header]
+    });
+    $[66] = header;
+    $[67] = t20;
+    $[68] = t21;
+  } else {
+    t21 = $[68];
+  }
+  let t22;
+  if ($[69] !== pan || $[70] !== t21) {
+    t22 = _jsx(GestureDetector, {
+      gesture: pan,
+      children: t21
+    });
+    $[69] = pan;
+    $[70] = t21;
+    $[71] = t22;
+  } else {
+    t22 = $[71];
+  }
+  let t23;
+  if ($[72] !== children) {
+    t23 = _jsx(KeyboardToolbar.Group, {
+      style: styles.content,
+      children: children
+    });
+    $[72] = children;
+    $[73] = t23;
+  } else {
+    t23 = $[73];
+  }
+  let t24;
+  if ($[74] !== footer || $[75] !== footerStyle || $[76] !== theme.bg.card) {
+    t24 = footer ? _jsx(Animated.View, {
+      style: [{
+        backgroundColor: theme.bg.card
+      }, footerStyle],
+      children: footer
+    }) : null;
+    $[74] = footer;
+    $[75] = footerStyle;
+    $[76] = theme.bg.card;
+    $[77] = t24;
+  } else {
+    t24 = $[77];
+  }
+  let t25;
+  if ($[78] !== requestClose || $[79] !== t19 || $[80] !== t22 || $[81] !== t23 || $[82] !== t24 || $[83] !== testID) {
+    t25 = _jsxs(Animated.View, {
+      accessibilityViewIsModal: true,
+      importantForAccessibility: "yes",
+      onAccessibilityEscape: requestClose,
+      style: t19,
+      testID: testID,
+      children: [t22, t23, t24]
+    });
+    $[78] = requestClose;
+    $[79] = t19;
+    $[80] = t22;
+    $[81] = t23;
+    $[82] = t24;
+    $[83] = testID;
+    $[84] = t25;
+  } else {
+    t25 = $[84];
+  }
+  let t26;
+  if ($[85] !== t11 || $[86] !== t17 || $[87] !== t25) {
+    t26 = _jsxs(View, {
+      pointerEvents: t11,
+      style: StyleSheet.absoluteFill,
+      children: [t17, t25]
+    });
+    $[85] = t11;
+    $[86] = t17;
+    $[87] = t25;
+    $[88] = t26;
+  } else {
+    t26 = $[88];
+  }
+  return t26;
+}
+function _temp2(a_0, b_0) {
+  return b_0 - a_0;
+}
+function _temp(a, b) {
+  return a - b;
+}
+const styles = StyleSheet.create({
+  backdrop: {
+    backgroundColor: SCRIM
+  },
+  panel: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    overflow: "hidden"
+  },
+  content: {
+    flex: 1,
+    minHeight: 0
+  },
+  handleArea: {
+    paddingTop: 8
+  },
+  handle: {
+    alignSelf: "center",
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    marginBottom: 8
+  }
+});

package/dist/Dialog/dialog-actions.d.ts

@@ -0,0 +1,17 @@
+import { type ButtonProps } from "../Actions/Actions.Button.js";
+export interface DialogAction {
+    title: string;
+    onPress: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    testID?: string;
+}
+/**
+ * The footer of every dialog in the DS, as the app dialogs already draw it: cancel (outline)
+ * and confirm side by side, half the width each.
+ */
+export declare function DialogActions({ cancel, confirm, confirmVariant, }: {
+    cancel: DialogAction;
+    confirm?: DialogAction;
+    confirmVariant?: ButtonProps["variant"];
+}): import("react").JSX.Element;

package/dist/Dialog/dialog-actions.js

@@ -0,0 +1,59 @@
+import { c as _c } from "react/compiler-runtime";
+import Button from "../Actions/Actions.Button.js";
+import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+/**
+ * The footer of every dialog in the DS, as the app dialogs already draw it: cancel (outline)
+ * and confirm side by side, half the width each.
+ */
+export function DialogActions(t0) {
+  const $ = _c(8);
+  const {
+    cancel,
+    confirm,
+    confirmVariant: t1
+  } = t0;
+  const confirmVariant = t1 === undefined ? "primary" : t1;
+  let t2;
+  if ($[0] !== cancel) {
+    t2 = _jsx(View, {
+      className: "flex-1",
+      children: _jsx(Button, {
+        ...cancel,
+        variant: "outline"
+      })
+    });
+    $[0] = cancel;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== confirm || $[3] !== confirmVariant) {
+    t3 = confirm ? _jsx(View, {
+      className: "flex-1",
+      children: _jsx(Button, {
+        ...confirm,
+        variant: confirmVariant
+      })
+    }) : null;
+    $[2] = confirm;
+    $[3] = confirmVariant;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== t2 || $[6] !== t3) {
+    t4 = _jsxs(View, {
+      className: "flex-row gap-3",
+      children: [t2, t3]
+    });
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
+}

package/dist/Dialog/index.d.ts

@@ -3,6 +3,7 @@ import ActionSheet from "./Dialog.ActionSheet.js";
 import Confirmation from "./Dialog.Confirmation.js";
 import EditValue from "./Dialog.EditValue.js";
 import Sheet from "./Dialog.Sheet.js";
+import { OverlayHost, OverlayPortal } from "./OverlayHost.js";
 import { requestConfirmation } from "./requestConfirmation.js";
 export declare const Dialog: {
     Confirmation: typeof Confirmation;
@@ -11,11 +12,13 @@ export declare const Dialog: {
     ActionSheet: typeof ActionSheet;
     requestConfirmation: typeof requestConfirmation;
 };
-export { ConfirmationProvider, requestConfirmation, Sheet, useConfirmationContext };
+export { ConfirmationProvider, OverlayHost, OverlayPortal, requestConfirmation, Sheet, useConfirmationContext, };
 export type { ConfirmationOptions } from "./Confirmation.context.js";
 export type { ActionSheetAction, ActionSheetProps, } from "./Dialog.ActionSheet.js";
 export type { ConfirmationProps } from "./Dialog.Confirmation.js";
 export type { EditValueOption, EditValueProps, } from "./Dialog.EditValue.js";
 export type { SheetProps } from "./Dialog.Sheet.js";
+export type { OverlayPortalProps } from "./OverlayHost.js";
 export type { NativeConfirmationOptions } from "./requestConfirmation.js";
+export type { SnapPoint } from "./SheetSurface.js";
 export default Dialog;

package/dist/Dialog/index.js

@@ -1,15 +1,16 @@
-import { ConfirmationProvider, useConfirmationContext, } from "./Confirmation.context.js";
+import { ConfirmationProvider, useConfirmationContext } from "./Confirmation.context.js";
 import ActionSheet from "./Dialog.ActionSheet.js";
 import Confirmation from "./Dialog.Confirmation.js";
 import EditValue from "./Dialog.EditValue.js";
 import Sheet from "./Dialog.Sheet.js";
+import { OverlayHost, OverlayPortal } from "./OverlayHost.js";
 import { requestConfirmation } from "./requestConfirmation.js";
 export const Dialog = {
-    Confirmation,
-    Sheet,
-    EditValue,
-    ActionSheet,
-    requestConfirmation,
+  Confirmation,
+  Sheet,
+  EditValue,
+  ActionSheet,
+  requestConfirmation
 };
-export { ConfirmationProvider, requestConfirmation, Sheet, useConfirmationContext };
+export { ConfirmationProvider, OverlayHost, OverlayPortal, requestConfirmation, Sheet, useConfirmationContext };
 export default Dialog;

package/dist/Dialog/overlay.store.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export type OverlayLayer = "sheet" | "toast";
+export interface OverlayEntry {
+    key: string;
+    layer: OverlayLayer;
+    element: ReactNode;
+    /** Returns true when the overlay consumed the Android back press. */
+    onBack?: () => boolean;
+}
+/**
+ * One store for every overlay of the app. Components declare overlays where
+ * they live; the single OverlayHost draws them above the screen in the same
+ * native window, so touches, keyboard tracking and CSS variables keep working.
+ */
+export declare const overlayStore: {
+    subscribe(listener: () => void): () => void;
+    entries(): OverlayEntry[];
+    hasHost(): boolean;
+    attachHost(): () => void;
+    upsert(entry: OverlayEntry): void;
+    remove(key: string): void;
+    /** Topmost overlay with a back handler decides. */
+    handleBack(): boolean;
+};

package/dist/Dialog/overlay.store.js

@@ -0,0 +1,59 @@
+const LAYER_ORDER = {
+  sheet: 0,
+  toast: 1
+};
+let entries = [];
+let hosts = 0;
+const listeners = new Set();
+function emit() {
+  for (const listener of [...listeners]) listener();
+}
+function byLayer(a, b) {
+  return LAYER_ORDER[a.layer] - LAYER_ORDER[b.layer];
+}
+
+/**
+ * One store for every overlay of the app. Components declare overlays where
+ * they live; the single OverlayHost draws them above the screen in the same
+ * native window, so touches, keyboard tracking and CSS variables keep working.
+ */
+export const overlayStore = {
+  subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+  entries() {
+    return entries;
+  },
+  hasHost() {
+    return hosts > 0;
+  },
+  attachHost() {
+    hosts += 1;
+    emit();
+    return () => {
+      hosts -= 1;
+      emit();
+    };
+  },
+  upsert(entry) {
+    const index = entries.findIndex(current => current.key === entry.key);
+    entries = index === -1 ? [...entries, entry].sort(byLayer) : entries.map((current, position) => position === index ? entry : current);
+    emit();
+  },
+  remove(key) {
+    if (!entries.some(entry => entry.key === key)) return;
+    entries = entries.filter(entry => entry.key !== key);
+    emit();
+  },
+  /** Topmost overlay with a back handler decides. */
+  handleBack() {
+    for (let index = entries.length - 1; index >= 0; index -= 1) {
+      const onBack = entries[index].onBack;
+      if (onBack) return onBack();
+    }
+    return false;
+  }
+};

package/dist/Dialog/requestConfirmation.js

@@ -1,13 +1,23 @@
 import { Alert } from "react-native";
-export function requestConfirmation({ title = "Confirmación", message = "¿Estás seguro de que quieres continuar?", confirmText = "Confirmar", cancelText = "Cancelar", destructive = false, } = {}) {
-    return new Promise((resolve) => {
-        Alert.alert(title, message, [
-            { text: cancelText, style: "cancel", onPress: () => resolve(false) },
-            {
-                text: confirmText,
-                style: destructive ? "destructive" : "default",
-                onPress: () => resolve(true),
-            },
-        ], { cancelable: true, onDismiss: () => resolve(false) });
+export function requestConfirmation({
+  title = "Confirmación",
+  message = "¿Estás seguro de que quieres continuar?",
+  confirmText = "Confirmar",
+  cancelText = "Cancelar",
+  destructive = false
+} = {}) {
+  return new Promise(resolve => {
+    Alert.alert(title, message, [{
+      text: cancelText,
+      style: "cancel",
+      onPress: () => resolve(false)
+    }, {
+      text: confirmText,
+      style: destructive ? "destructive" : "default",
+      onPress: () => resolve(true)
+    }], {
+      cancelable: true,
+      onDismiss: () => resolve(false)
     });
+  });
 }