@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Dialog/SheetSurface.js

@@ -0,0 +1,495 @@
+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 { createContext, useContext, useEffect, useEffectEvent, useRef, useState } 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;
+const RestingOffsetContext = createContext(0);
+
+/** The part of the sheet panel below the screen at rest (0 outside a sheet). */
+export function useSheetRestingOffset() {
+  return useContext(RestingOffsetContext);
+}
+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;
+}
+
+/**
+ * Panel geometry for a host of `height` whose top `topInset` points are covered (status
+ * bar, notch). The panel is as tall as the highest snap point and never reaches into the
+ * inset; it rests pushed down `restOffset` so only the lowest snap point shows.
+ */
+export function sheetGeometry(snapPoints, height, topInset) {
+  const ceiling = height - topInset - 8;
+  const snaps = snapPoints.map(point => Math.min(resolveSnapPoint(point, height), ceiling)).sort((a, b) => a - b);
+  const panelHeight = snaps[snaps.length - 1] ?? height * 0.6;
+  const offsets = snaps.map(snap => panelHeight - snap).sort((a, b) => b - a);
+  return {
+    ceiling,
+    panelHeight,
+    offsets,
+    restOffset: offsets[0] ?? 0
+  };
+}
+
+/**
+ * How much of the panel sits below the screen while it rests at its lowest snap point.
+ * Scroll content needs this much extra room at its end, or its last rows stay off screen
+ * until the sheet is dragged up.
+ */
+export function restingOffset(snapPoints, height, topInset) {
+  return sheetGeometry(snapPoints, height, topInset).restOffset;
+}
+/**
+ * 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(88);
+  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 frame = useRef(null);
+  const [host, setHost] = useState(null);
+  const available = host?.height ?? windowHeight;
+  const topInset = Math.max(0, insets.top - (host?.top ?? 0));
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => frame.current?.measureInWindow((_x, top, _width, height) => {
+      if (height > 0) {
+        setHost({
+          top,
+          height
+        });
+      }
+    });
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const measureHost = t1;
+  let t2;
+  if ($[1] !== available || $[2] !== snapPoints || $[3] !== topInset) {
+    t2 = sheetGeometry(snapPoints, available, topInset);
+    $[1] = available;
+    $[2] = snapPoints;
+    $[3] = topInset;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const {
+    ceiling,
+    panelHeight,
+    offsets,
+    restOffset
+  } = t2;
+  const hiddenOffset = panelHeight + insets.bottom;
+  const duration = reducedMotion ? 0 : DURATION_MS;
+  const translateY = useSharedValue(hiddenOffset);
+  const dragStart = useSharedValue(0);
+  let t3;
+  if ($[5] !== onExited) {
+    t3 = () => onExited();
+    $[5] = onExited;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const exited = useEffectEvent(t3);
+  let t4;
+  if ($[7] !== duration || $[8] !== exited || $[9] !== hiddenOffset || $[10] !== restOffset || $[11] !== translateY || $[12] !== visible) {
+    t4 = () => {
+      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);
+    };
+    $[7] = duration;
+    $[8] = exited;
+    $[9] = hiddenOffset;
+    $[10] = restOffset;
+    $[11] = translateY;
+    $[12] = visible;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  let t5;
+  if ($[14] !== duration || $[15] !== hiddenOffset || $[16] !== restOffset || $[17] !== translateY || $[18] !== visible) {
+    t5 = [visible, restOffset, hiddenOffset, duration, translateY];
+    $[14] = duration;
+    $[15] = hiddenOffset;
+    $[16] = restOffset;
+    $[17] = translateY;
+    $[18] = visible;
+    $[19] = t5;
+  } else {
+    t5 = $[19];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[20] !== dismissible || $[21] !== onRequestClose || $[22] !== visible) {
+    t6 = () => {
+      if (visible && dismissible) {
+        onRequestClose();
+      }
+    };
+    $[20] = dismissible;
+    $[21] = onRequestClose;
+    $[22] = visible;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  const requestClose = t6;
+  let t7;
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = [-8, 8];
+    $[24] = t7;
+  } else {
+    t7 = $[24];
+  }
+  let t8;
+  if ($[25] !== dragStart || $[26] !== translateY) {
+    t8 = () => {
+      "worklet";
+
+      dragStart.set(translateY.get());
+    };
+    $[25] = dragStart;
+    $[26] = translateY;
+    $[27] = t8;
+  } else {
+    t8 = $[27];
+  }
+  let t9;
+  if ($[28] !== dismissible || $[29] !== dragStart || $[30] !== hiddenOffset || $[31] !== restOffset || $[32] !== translateY) {
+    t9 = event => {
+      "worklet";
+
+      const lowest = dismissible ? hiddenOffset : restOffset + 40;
+      translateY.set(Math.min(Math.max(dragStart.get() + event.translationY, 0), lowest));
+    };
+    $[28] = dismissible;
+    $[29] = dragStart;
+    $[30] = hiddenOffset;
+    $[31] = restOffset;
+    $[32] = translateY;
+    $[33] = t9;
+  } else {
+    t9 = $[33];
+  }
+  let t10;
+  if ($[34] !== dismissible || $[35] !== offsets || $[36] !== onRequestClose || $[37] !== panelHeight || $[38] !== restOffset || $[39] !== translateY) {
+    t10 = 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
+      }));
+    };
+    $[34] = dismissible;
+    $[35] = offsets;
+    $[36] = onRequestClose;
+    $[37] = panelHeight;
+    $[38] = restOffset;
+    $[39] = translateY;
+    $[40] = t10;
+  } else {
+    t10 = $[40];
+  }
+  let t11;
+  if ($[41] !== t10 || $[42] !== t8 || $[43] !== t9) {
+    t11 = {
+      activeOffsetY: t7,
+      onActivate: t8,
+      onUpdate: t9,
+      onDeactivate: t10
+    };
+    $[41] = t10;
+    $[42] = t8;
+    $[43] = t9;
+    $[44] = t11;
+  } else {
+    t11 = $[44];
+  }
+  const pan = usePanGesture(t11);
+  const panelStyle = useAnimatedStyle(() => {
+    const lifted = Math.abs(keyboard.height.get());
+    const height_0 = lifted > 0 ? Math.max(panelHeight, Math.min(ceiling, lifted + MIN_CONTENT_ABOVE_KEYBOARD)) : panelHeight;
+    return {
+      height: height_0,
+      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 t12 = visible ? "box-none" : "none";
+  let t13;
+  if ($[45] !== backdropStyle) {
+    t13 = [StyleSheet.absoluteFill, styles.backdrop, backdropStyle];
+    $[45] = backdropStyle;
+    $[46] = t13;
+  } else {
+    t13 = $[46];
+  }
+  const t14 = dismissible ? "Cerrar" : undefined;
+  const t15 = dismissible ? "button" : undefined;
+  const t16 = testID ? `${testID}-backdrop` : undefined;
+  let t17;
+  if ($[47] !== dismissible || $[48] !== requestClose || $[49] !== t14 || $[50] !== t15 || $[51] !== t16) {
+    t17 = _jsx(Pressable, {
+      accessibilityLabel: t14,
+      accessibilityRole: t15,
+      accessible: dismissible,
+      onPress: requestClose,
+      style: StyleSheet.absoluteFill,
+      testID: t16
+    });
+    $[47] = dismissible;
+    $[48] = requestClose;
+    $[49] = t14;
+    $[50] = t15;
+    $[51] = t16;
+    $[52] = t17;
+  } else {
+    t17 = $[52];
+  }
+  let t18;
+  if ($[53] !== t13 || $[54] !== t17) {
+    t18 = _jsx(Animated.View, {
+      style: t13,
+      children: t17
+    });
+    $[53] = t13;
+    $[54] = t17;
+    $[55] = t18;
+  } else {
+    t18 = $[55];
+  }
+  let t19;
+  if ($[56] !== theme.bg.card) {
+    t19 = {
+      backgroundColor: theme.bg.card
+    };
+    $[56] = theme.bg.card;
+    $[57] = t19;
+  } else {
+    t19 = $[57];
+  }
+  let t20;
+  if ($[58] !== panelStyle || $[59] !== t19) {
+    t20 = [styles.panel, t19, panelStyle];
+    $[58] = panelStyle;
+    $[59] = t19;
+    $[60] = t20;
+  } else {
+    t20 = $[60];
+  }
+  let t21;
+  if ($[61] !== theme.border.default) {
+    t21 = _jsx(View, {
+      style: [styles.handle, {
+        backgroundColor: theme.border.default
+      }]
+    });
+    $[61] = theme.border.default;
+    $[62] = t21;
+  } else {
+    t21 = $[62];
+  }
+  let t22;
+  if ($[63] !== header || $[64] !== t21) {
+    t22 = _jsxs(View, {
+      style: styles.handleArea,
+      children: [t21, header]
+    });
+    $[63] = header;
+    $[64] = t21;
+    $[65] = t22;
+  } else {
+    t22 = $[65];
+  }
+  let t23;
+  if ($[66] !== pan || $[67] !== t22) {
+    t23 = _jsx(GestureDetector, {
+      gesture: pan,
+      children: t22
+    });
+    $[66] = pan;
+    $[67] = t22;
+    $[68] = t23;
+  } else {
+    t23 = $[68];
+  }
+  let t24;
+  if ($[69] !== children || $[70] !== restOffset) {
+    t24 = _jsx(KeyboardToolbar.Group, {
+      style: styles.content,
+      children: _jsx(RestingOffsetContext, {
+        value: restOffset,
+        children: children
+      })
+    });
+    $[69] = children;
+    $[70] = restOffset;
+    $[71] = t24;
+  } else {
+    t24 = $[71];
+  }
+  let t25;
+  if ($[72] !== available || $[73] !== footer || $[74] !== footerStyle || $[75] !== theme.bg.card) {
+    t25 = footer ? _jsxs(Animated.View, {
+      style: [{
+        backgroundColor: theme.bg.card
+      }, footerStyle],
+      children: [footer, _jsx(View, {
+        pointerEvents: "none",
+        style: [styles.footerSkirt, {
+          backgroundColor: theme.bg.card,
+          height: available
+        }]
+      })]
+    }) : null;
+    $[72] = available;
+    $[73] = footer;
+    $[74] = footerStyle;
+    $[75] = theme.bg.card;
+    $[76] = t25;
+  } else {
+    t25 = $[76];
+  }
+  let t26;
+  if ($[77] !== requestClose || $[78] !== t20 || $[79] !== t23 || $[80] !== t24 || $[81] !== t25 || $[82] !== testID) {
+    t26 = _jsxs(Animated.View, {
+      accessibilityViewIsModal: true,
+      importantForAccessibility: "yes",
+      onAccessibilityEscape: requestClose,
+      style: t20,
+      testID: testID,
+      children: [t23, t24, t25]
+    });
+    $[77] = requestClose;
+    $[78] = t20;
+    $[79] = t23;
+    $[80] = t24;
+    $[81] = t25;
+    $[82] = testID;
+    $[83] = t26;
+  } else {
+    t26 = $[83];
+  }
+  let t27;
+  if ($[84] !== t12 || $[85] !== t18 || $[86] !== t26) {
+    t27 = _jsxs(View, {
+      onLayout: measureHost,
+      pointerEvents: t12,
+      ref: frame,
+      style: StyleSheet.absoluteFill,
+      children: [t18, t26]
+    });
+    $[84] = t12;
+    $[85] = t18;
+    $[86] = t26;
+    $[87] = t27;
+  } else {
+    t27 = $[87];
+  }
+  return t27;
+}
+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
+  },
+  footerSkirt: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: "100%"
+  },
+  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;
+  }
+};