@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/primitives/use-controllable-state.js

@@ -0,0 +1,40 @@
+import { c as _c } from "react/compiler-runtime";
+import { useCallback, useState } from "react";
+
+/** `value` when the parent controls it, else local state seeded by `defaultValue`. `onChange` fires either way. */
+export function useControllableState(t0) {
+  const $ = _c(6);
+  const {
+    value,
+    defaultValue,
+    onChange
+  } = t0;
+  const [local, setLocal] = useState(defaultValue);
+  const controlled = value !== undefined;
+  const current = controlled ? value : local;
+  let t1;
+  if ($[0] !== controlled || $[1] !== onChange) {
+    t1 = next => {
+      if (!controlled) {
+        setLocal(next);
+      }
+      onChange?.(next);
+    };
+    $[0] = controlled;
+    $[1] = onChange;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const setValue = t1;
+  let t2;
+  if ($[3] !== current || $[4] !== setValue) {
+    t2 = [current, setValue];
+    $[3] = current;
+    $[4] = setValue;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}

package/dist/primitives/web-click-guard.js

@@ -0,0 +1,69 @@
+import { c as _c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { Platform } from "react-native";
+
+/** The part of a DOM element the web click guard uses: on the web a `View` is a DOM element. */
+
+function isDomNode(node) {
+  return "addEventListener" in node && typeof node.addEventListener === "function";
+}
+
+/**
+ * On the web a pressable presses on the DOM click, which neither the touch
+ * responder nor Gesture Handler cancels (it captures the pointer on the
+ * element pressed). So, in the capture phase on the dragged content, this
+ * drops the click that ends a drag (`swallowNext`, at the drag's start).
+ * `swallowOnDown` decides afresh at each touch whether its click is dropped
+ * (a tap made while a swiped row is open). On Android and iOS it does
+ * nothing: there the drag cancels the press.
+ */
+export function useWebClickGuard(t0) {
+  const $ = _c(3);
+  const swallowOnDown = t0 === undefined ? _temp : t0;
+  const swallow = useRef(false);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      swallow.current = true;
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== swallowOnDown) {
+    t2 = {
+      swallowNext: t1,
+      ref: node => {
+        if (Platform.OS !== "web" || !node || !isDomNode(node)) {
+          return;
+        }
+        const onClick = event => {
+          if (!swallow.current) {
+            return;
+          }
+          swallow.current = false;
+          event.stopPropagation();
+          event.preventDefault();
+        };
+        const onPointerDown = () => {
+          swallow.current = swallowOnDown();
+        };
+        node.addEventListener("click", onClick, true);
+        node.addEventListener("pointerdown", onPointerDown, true);
+        return () => {
+          node.removeEventListener("click", onClick, true);
+          node.removeEventListener("pointerdown", onPointerDown, true);
+        };
+      }
+    };
+    $[1] = swallowOnDown;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+function _temp() {
+  return false;
+}

package/dist/push.js

@@ -0,0 +1,166 @@
+import { useEffect, useRef } from "react";
+import { Platform } from "react-native";
+
+// `expo-notifications`, `expo-constants` and `expo-device` are optional peers.
+// Metro bundles a `require` placed directly in a `try` block as an optional
+// dependency, so a missing peer does not break the bundle.
+
+let notifications;
+let constants;
+let device;
+
+/** `expo-notifications`, or `null` when the optional peer is not installed. */
+export function loadNotifications() {
+  if (notifications === undefined) {
+    try {
+      notifications = require("expo-notifications");
+    } catch {
+      notifications = null;
+    }
+  }
+  return notifications;
+}
+
+/** `expo-constants` (its default export is the `Constants` object), or `null` when not installed. */
+export function loadConstants() {
+  if (constants === undefined) {
+    try {
+      constants = require("expo-constants");
+    } catch {
+      constants = null;
+    }
+  }
+  return constants;
+}
+
+/** `expo-device`, or `null` when the optional peer is not installed. */
+export function loadDevice() {
+  if (device === undefined) {
+    try {
+      device = require("expo-device");
+    } catch {
+      device = null;
+    }
+  }
+  return device;
+}
+
+/** A tapped push: the notification's request id and its `data` object. */
+
+/**
+ * The Expo push token for this device, or `null` when push is not possible:
+ * a peer is missing, a simulator or emulator, no permission, no EAS project id
+ * (`expo.extra.eas.projectId`), or no FCM credentials in this Android build.
+ */
+export async function getExpoPushToken({
+  ask,
+  channelName = "default"
+}) {
+  const Notifications = loadNotifications();
+  const constantsModule = loadConstants();
+  const deviceModule = loadDevice();
+  if (!Notifications || !constantsModule || !deviceModule) return null;
+  if (!deviceModule.isDevice) return null;
+  const projectId = constantsModule.default.expoConfig?.extra?.eas?.projectId;
+  if (typeof projectId !== "string" || projectId === "") return null;
+  if (Platform.OS === "android") {
+    await Notifications.setNotificationChannelAsync(channelName, {
+      name: channelName,
+      importance: Notifications.AndroidImportance.HIGH
+    });
+  }
+  const current = await Notifications.getPermissionsAsync();
+  const granted = current.granted || ask && (await Notifications.requestPermissionsAsync()).granted;
+  if (!granted) return null;
+  try {
+    return (await Notifications.getExpoPushTokenAsync({
+      projectId
+    })).data;
+  } catch {
+    // No google-services.json in this build: FCM cannot issue a token.
+    return null;
+  }
+}
+let foregroundHandlerSet = false;
+
+/** Shows pushes as banners while the app is open. Runs once; the hook calls it. */
+export function showPushesInForeground() {
+  const Notifications = loadNotifications();
+  if (!Notifications || foregroundHandlerSet) return;
+  foregroundHandlerSet = true;
+  Notifications.setNotificationHandler({
+    handleNotification: async () => ({
+      shouldShowBanner: true,
+      shouldShowList: true,
+      shouldPlaySound: true,
+      shouldSetBadge: false
+    })
+  });
+}
+function toTap(response) {
+  if (!response) return null;
+  const {
+    identifier,
+    content
+  } = response.notification.request;
+  const data = content.data;
+  return {
+    identifier,
+    data: typeof data === "object" && data !== null ? data : {},
+    response
+  };
+}
+
+/**
+ * Mount once under your auth gate. Registers this device's token through
+ * `register` and reports taps on pushes through `onNotificationTap`. Does
+ * nothing when a peer is missing. Navigation is yours: route from
+ * `tap.data` in the callback.
+ */
+export function useExpoPushRegistration(options) {
+  const {
+    channelName,
+    ask = true,
+    showInForeground = true
+  } = options;
+  const latest = useRef(options);
+  latest.current = options;
+  useEffect(() => {
+    if (showInForeground) showPushesInForeground();
+    let cancelled = false;
+    void getExpoPushToken({
+      ask,
+      channelName
+    }).then(token => {
+      if (token && !cancelled) {
+        void latest.current.register({
+          token,
+          platform: Platform.OS === "ios" ? "ios" : "android"
+        });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [ask, channelName, showInForeground]);
+  useEffect(() => {
+    const Notifications = loadNotifications();
+    if (!Notifications) return;
+    const seen = new Set();
+    const deliver = response => {
+      const tap = toTap(response);
+      if (!tap || seen.has(tap.identifier)) return;
+      seen.add(tap.identifier);
+      latest.current.onNotificationTap?.(tap);
+    };
+    let cancelled_0 = false;
+    void Notifications.getLastNotificationResponseAsync().then(response_0 => {
+      if (!cancelled_0) deliver(response_0);
+    });
+    const subscription = Notifications.addNotificationResponseReceivedListener(deliver);
+    return () => {
+      cancelled_0 = true;
+      subscription.remove();
+    };
+  }, []);
+}

package/dist/relativeTime.js

@@ -0,0 +1,70 @@
+// The twin of `@vvedantb/ui`'s `formatCompactRelativeTime`
+// (`ui/app/src/time/compactRelativeTime.ts`), which `RelativeDateTime` shows.
+// The web file pulls no DOM, but the web package does, so this is a copy;
+// tests/relativeTime.test.ts checks both give the same strings.
+
+const MS_PER_MINUTE = 60_000;
+const MS_PER_DAY = 86_400_000;
+
+/** Rounds toward zero; `-0` becomes `0`. */
+function truncate(n) {
+  return n < 0 ? Math.ceil(n) || 0 : Math.floor(n);
+}
+
+/** Local UTC offset in minutes, rounded to 15 minutes. */
+function utcOffset(ms) {
+  return -Math.round(new Date(ms).getTimezoneOffset() / 15) * 15;
+}
+
+/** Adds calendar months in local time and clamps the day to the target month. */
+function addMonths(ms, months) {
+  const date = new Date(ms);
+  const day = date.getDate();
+  date.setDate(1);
+  date.setMonth(date.getMonth() + months);
+  const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+  date.setDate(Math.min(day, daysInMonth));
+  return date.getTime();
+}
+
+/** Fractional calendar months from `a` to `b`, negated (the moment.js formula). */
+function monthDiff(a, b) {
+  if (new Date(a).getDate() < new Date(b).getDate()) return -monthDiff(b, a);
+  const from = new Date(a);
+  const to = new Date(b);
+  const whole = (to.getFullYear() - from.getFullYear()) * 12 + (to.getMonth() - from.getMonth());
+  const anchor = addMonths(a, whole);
+  const before = b - anchor < 0;
+  const anchor2 = addMonths(a, whole + (before ? -1 : 1));
+  return +(-(whole + (b - anchor) / (before ? anchor - anchor2 : anchor2 - anchor)) || 0);
+}
+
+/**
+ * Time since `date` as one compact unit: `"now"` or `"42s"`, then `"5m"`,
+ * `"3h"`, `"2d"`, `"4mo"`, `"1y"`. Strings are parsed with `new Date(string)`.
+ * An invalid date gives `"NaNy"`, or `"0mo"` with `calendar`.
+ */
+export function formatCompactRelativeTime(date, options = {}) {
+  const now = options.now ?? Date.now();
+  const then = new Date(date).getTime();
+  const diff = now - then;
+  const seconds = truncate(diff / 1000);
+  if (seconds < 60) return options.justNow ?? `${seconds}s`;
+  const minutes = truncate(diff / MS_PER_MINUTE);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = truncate(diff / (60 * MS_PER_MINUTE));
+  if (hours < 24) return `${hours}h`;
+  if (!options.calendar) {
+    const days = Math.floor(hours / 24);
+    if (days < 30) return `${days}d`;
+    const months = Math.floor(days / 30);
+    if (months < 12) return `${months}mo`;
+    return `${Math.floor(months / 12)}y`;
+  }
+  const zoneDelta = (utcOffset(then) - utcOffset(now)) * MS_PER_MINUTE;
+  const days = truncate((diff - zoneDelta) / MS_PER_DAY);
+  if (days < 30) return `${days}d`;
+  const months = monthDiff(now, then);
+  if (truncate(months) < 12) return `${truncate(months)}mo`;
+  return `${truncate(months / 12)}y`;
+}

package/dist/router/RouterStackPageHeader.jsx

@@ -0,0 +1,53 @@
+import { c as _c } from "react/compiler-runtime";
+import { useRouter } from "expo-router";
+import { StackPageHeader } from "../StackPageHeader";
+/** Goes back when the stack has a screen below, else replaces the route with `fallbackHref`. */
+export function goBackOrReplace(router, fallbackHref = "/") {
+  if (router.canGoBack()) router.back();else router.replace(fallbackHref);
+}
+
+/**
+ * `StackPageHeader` with a router-aware back button: `router.canGoBack() ?
+ * router.back() : router.replace(fallbackHref)`. Same props as
+ * `StackPageHeader` without `onBack`, and `fallbackHref` (default `"/"`).
+ * On `@vvedantb/native-ui/expo-router` only, so the other entries never import
+ * `expo-router`.
+ */
+export function RouterStackPageHeader(t0) {
+  const $ = _c(9);
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      fallbackHref: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+    $[2] = t1;
+  } else {
+    props = $[1];
+    t1 = $[2];
+  }
+  const fallbackHref = t1 === undefined ? "/" : t1;
+  const router = useRouter();
+  let t2;
+  if ($[3] !== fallbackHref || $[4] !== router) {
+    t2 = () => goBackOrReplace(router, fallbackHref);
+    $[3] = fallbackHref;
+    $[4] = router;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== props || $[7] !== t2) {
+    t3 = <StackPageHeader {...props} onBack={t2} />;
+    $[6] = props;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
+}

package/dist/selectA11y.js

@@ -0,0 +1,32 @@
+/**
+ * Accessibility and test props for a `Select` option. On web
+ * `@rn-primitives/select` passes the props of its `Item` through a `Slot` to
+ * the Radix `Select.Item`, a DOM `<div>`. React Native Web never sees them, so
+ * React logs `accessibilityLabel` and `testID` there as unknown DOM props. Web
+ * gets `aria-label` and `data-testid`; iOS and Android keep the native props.
+ * No React Native import, so the tests can load this file.
+ */
+
+/**
+ * Spread on the `SelectItem`. Pass `Platform.OS` as `os`. Without `testID` the
+ * result has no test id key, not one set to `undefined`.
+ */
+export function selectItemA11yProps({
+  label,
+  testID
+}, os) {
+  if (os === "web") {
+    return testID === undefined ? {
+      "aria-label": label
+    } : {
+      "aria-label": label,
+      "data-testid": testID
+    };
+  }
+  return testID === undefined ? {
+    accessibilityLabel: label
+  } : {
+    accessibilityLabel: label,
+    testID
+  };
+}

package/dist/settings/MoreFromProjectV.jsx

@@ -0,0 +1,168 @@
+import { c as _c } from "react/compiler-runtime";
+import { Linking, Platform, Text, View } from "react-native";
+import { APP_ICONS } from "../brand/AppIcons";
+import { AppMark } from "../brand/AppMark";
+import { cn } from "../cn";
+import { textStyle, typeStyle } from "../controlStyles";
+import { ListRow } from "../ListRow";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { SettingsSection } from "./SettingsSection";
+import { openProjectVApp, otherProjectVMobileApps } from "./projectVMobileApps";
+
+/**
+ * The mark for each phone app. V Store has no mark of its own (it was left out
+ * of the brand marks in 0.3.9), so it shows the Project V mark.
+ */
+const MARK = {
+  vibot: "vibot",
+  verve: "verve",
+  velth: "velth",
+  vmem: "vmem",
+  vstore: "projectv"
+};
+/** A small muted "from Project V" line with the Project V mark, for the end of a settings screen. */
+export function FromProjectV(t0) {
+  const $ = _c(19);
+  const {
+    className,
+    testID
+  } = t0;
+  const scheme = useScheme();
+  const muted = tokens.color.muted[scheme];
+  const ProjectVMark = APP_ICONS.projectv;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cn("flex-row items-center justify-center gap-1.5 py-2", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== scheme) {
+    t2 = textStyle("muted", scheme);
+    $[2] = scheme;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t2) {
+    t3 = <Text className="text-sm font-instrument-sans" style={t2}>from</Text>;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== muted) {
+    t4 = <ProjectVMark size={14} color={muted} />;
+    $[6] = muted;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== scheme) {
+    t5 = textStyle("muted", scheme);
+    $[8] = scheme;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = typeStyle("semibold");
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== t5) {
+    t7 = <Text className="text-sm font-instrument-sans-semibold" style={[t5, t6]}>Project V</Text>;
+    $[11] = t5;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== t1 || $[14] !== t3 || $[15] !== t4 || $[16] !== t7 || $[17] !== testID) {
+    t8 = <View testID={testID} accessible={true} accessibilityLabel="from Project V" className={t1}>{t3}{t4}{t7}</View>;
+    $[13] = t1;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t7;
+    $[17] = testID;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  return t8;
+}
+/**
+ * Settings section listing the other Project V phone apps, each with its mark,
+ * name and one line. A row opens the app if it is installed, else V Store's
+ * home, else its website (`openProjectVApp`).
+ */
+export function MoreFromProjectV(t0) {
+  const $ = _c(13);
+  const {
+    current,
+    variant: t1,
+    title: t2,
+    onOpen,
+    className
+  } = t0;
+  const variant = t1 === undefined ? "section" : t1;
+  const title = t2 === undefined ? "More from Project V" : t2;
+  if (variant === "footer") {
+    let t3;
+    if ($[0] !== className) {
+      t3 = <FromProjectV className={className} />;
+      $[0] = className;
+      $[1] = t3;
+    } else {
+      t3 = $[1];
+    }
+    return t3;
+  }
+  let t3;
+  if ($[2] !== current || $[3] !== onOpen) {
+    let t4;
+    if ($[5] !== onOpen) {
+      t4 = app => <ListRow key={app.id} testID={`more-from-project-v-${app.id}`} title={app.name} meta={app.description} leading={<AppMark app={MARK[app.id]} size={28} />} accessibilityLabel={`${app.name}, ${app.description}`} onPress={() => {
+        openProjectVApp(app.id, Linking, Platform.OS).then(target => onOpen?.(app.id, target));
+      }} />;
+      $[5] = onOpen;
+      $[6] = t4;
+    } else {
+      t4 = $[6];
+    }
+    t3 = otherProjectVMobileApps(current).map(t4);
+    $[2] = current;
+    $[3] = onOpen;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[7] !== t3) {
+    t4 = <View className="flex-col gap-1 p-1">{t3}</View>;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== className || $[10] !== t4 || $[11] !== title) {
+    t5 = <SettingsSection title={title} bodyVariant="list" className={className}>{t4}</SettingsSection>;
+    $[9] = className;
+    $[10] = t4;
+    $[11] = title;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
+}

package/dist/settings/SettingsEmptyState.jsx

@@ -0,0 +1,102 @@
+import { c as _c } from "react/compiler-runtime";
+import { Text, View } from "react-native";
+import { sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { relaxedSizeStyle } from "./relaxedSizeStyle";
+/**
+ * The empty note for the inside of a `SettingsSection` (web
+ * `SettingsEmptyState`): an optional muted icon (28, half opacity), a centred
+ * `text-sm` medium title (14 / 20 / 500), a muted `text-xs leading-relaxed`
+ * description (12 / 19.5) and an optional action, in `px-4 py-16`. Use
+ * `EmptyState` for a whole screen.
+ */
+export function SettingsEmptyState(t0) {
+  const $ = _c(24);
+  const {
+    title,
+    description,
+    icon: Icon,
+    action,
+    testID
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let t1;
+  if ($[0] !== Icon || $[1] !== largerText || $[2] !== scheme) {
+    t1 = Icon ? <View className="mb-5 opacity-50"><Icon size={largerText ? 32 : 28} color={tokens.color.muted[scheme]} /></View> : null;
+    $[0] = Icon;
+    $[1] = largerText;
+    $[2] = scheme;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== scheme) {
+    t2 = textStyle("foreground", scheme);
+    $[4] = scheme;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  let t4;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = sizeStyle("text-sm");
+    t4 = typeStyle("medium");
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t3 = $[6];
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== t2) {
+    t5 = [t2, t3, t4];
+    $[8] = t2;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== t5 || $[11] !== title) {
+    t6 = <Text className="text-center font-instrument-sans-medium text-sm" style={t5}>{title}</Text>;
+    $[10] = t5;
+    $[11] = title;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== description || $[14] !== scheme) {
+    t7 = description ? <Text className="mt-2 max-w-sm text-center font-instrument-sans text-xs leading-relaxed" style={[textStyle("muted", scheme), relaxedSizeStyle("text-xs")]}>{description}</Text> : null;
+    $[13] = description;
+    $[14] = scheme;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== action) {
+    t8 = action ? <View className="mt-6">{action}</View> : null;
+    $[16] = action;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== t1 || $[19] !== t6 || $[20] !== t7 || $[21] !== t8 || $[22] !== testID) {
+    t9 = <View testID={testID} className="items-center justify-center px-4 py-16">{t1}{t6}{t7}{t8}</View>;
+    $[18] = t1;
+    $[19] = t6;
+    $[20] = t7;
+    $[21] = t8;
+    $[22] = testID;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  return t9;
+}