@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/settings/SettingsField.jsx

@@ -0,0 +1,49 @@
+import { c as _c } from "react/compiler-runtime";
+import { View, Text } from "react-native";
+import { sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { useScheme } from "../useScheme";
+import { relaxedSizeStyle } from "./relaxedSizeStyle";
+
+/**
+ * One labelled control in a `SettingsSection` body, the web stacked
+ * `SettingsField`: label `text-sm` medium (14 / 20 / 500) above the control,
+ * help text `text-xs leading-relaxed` (12 / 19.5), muted, below it.
+ */
+export function SettingsField(t0) {
+  const $ = _c(10);
+  const {
+    label,
+    description,
+    children
+  } = t0;
+  const scheme = useScheme();
+  let t1;
+  if ($[0] !== label || $[1] !== scheme) {
+    t1 = typeof label === "string" ? <Text className="mb-2 text-sm font-instrument-sans-medium" style={[textStyle("foreground", scheme), sizeStyle("text-sm"), typeStyle("medium")]}>{label}</Text> : label;
+    $[0] = label;
+    $[1] = scheme;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== description || $[4] !== scheme) {
+    t2 = description != null ? typeof description === "string" ? <Text className="mt-1.5 text-xs leading-relaxed font-instrument-sans" style={[textStyle("muted", scheme), relaxedSizeStyle("text-xs")]}>{description}</Text> : description : null;
+    $[3] = description;
+    $[4] = scheme;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== children || $[7] !== t1 || $[8] !== t2) {
+    t3 = <View>{t1}{children}{t2}</View>;
+    $[6] = children;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
+}

package/dist/settings/SettingsSection.jsx

@@ -0,0 +1,101 @@
+import { c as _c } from "react/compiler-runtime";
+import { View, Text } from "react-native";
+import { cn } from "../cn";
+import { cardStyle, sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { relaxedSizeStyle } from "./relaxedSizeStyle";
+export function SettingsSection(t0) {
+  const $ = _c(27);
+  const {
+    title,
+    description,
+    action,
+    footer,
+    children,
+    bodyVariant: t1,
+    className
+  } = t0;
+  const bodyVariant = t1 === undefined ? "form" : t1;
+  const scheme = useScheme();
+  const hasBody = children != null;
+  const hasCard = hasBody || footer != null;
+  let t2;
+  if ($[0] !== className) {
+    t2 = cn("flex-col gap-2", className);
+    $[0] = className;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== scheme || $[3] !== title) {
+    t3 = typeof title === "string" ? <Text accessibilityRole="header" className="text-sm font-instrument-sans-semibold" style={[textStyle("foreground", scheme), sizeStyle("text-sm"), typeStyle("semibold")]}>{title}</Text> : title;
+    $[2] = scheme;
+    $[3] = title;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== description || $[6] !== scheme) {
+    t4 = description != null ? typeof description === "string" ? <Text className="mt-0.5 text-sm leading-relaxed font-instrument-sans" style={[textStyle("muted", scheme), relaxedSizeStyle("text-sm")]}>{description}</Text> : description : null;
+    $[5] = description;
+    $[6] = scheme;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== t3 || $[9] !== t4) {
+    t5 = <View className="min-w-0 flex-1">{t3}{t4}</View>;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== action) {
+    t6 = action != null ? <View className="shrink-0">{action}</View> : null;
+    $[11] = action;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== t5 || $[14] !== t6) {
+    t7 = <View className="flex-row items-start justify-between gap-4 px-4">{t5}{t6}</View>;
+    $[13] = t5;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== bodyVariant || $[17] !== children || $[18] !== footer || $[19] !== hasBody || $[20] !== hasCard || $[21] !== scheme) {
+    t8 = hasCard ? <View className="overflow-hidden" style={cardStyle(scheme)}>{hasBody ? <View className={bodyVariant === "list" ? "flex-col" : bodyVariant === "compact" ? "px-4 py-3" : "px-4 py-5"}>{children}</View> : null}{footer != null ? <View className="flex-row items-center justify-end gap-2 px-4 py-3" style={{
+        backgroundColor: tokens.color.surfaceSecondary[scheme]
+      }}>{footer}</View> : null}</View> : null;
+    $[16] = bodyVariant;
+    $[17] = children;
+    $[18] = footer;
+    $[19] = hasBody;
+    $[20] = hasCard;
+    $[21] = scheme;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  let t9;
+  if ($[23] !== t2 || $[24] !== t7 || $[25] !== t8) {
+    t9 = <View className={t2}>{t7}{t8}</View>;
+    $[23] = t2;
+    $[24] = t7;
+    $[25] = t8;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  return t9;
+}

package/dist/settings/SettingsStack.jsx

@@ -0,0 +1,17 @@
+import { c as _c } from "react/compiler-runtime";
+import { View } from "react-native";
+export function SettingsStack(t0) {
+  const $ = _c(2);
+  const {
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children) {
+    t1 = <View className="flex-col gap-8 px-4 pt-2 pb-8">{children}</View>;
+    $[0] = children;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}

package/dist/settings/SettingsToggleRow.jsx

@@ -0,0 +1,163 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, View, Text } from "react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { relaxedSizeStyle } from "./relaxedSizeStyle";
+
+/**
+ * One row in a `SettingsSection` list, the web `SettingsToggleRow`: title
+ * `text-sm` medium (14 / 20 / 500), description `text-xs leading-relaxed`
+ * (12 / 19.5), muted; one step up each with larger text. The web action column
+ * is `min-h-10` (40); this one keeps the 44 touch target.
+ *
+ * With `onCheckedChange` the whole row is the switch, as `LabeledSwitchRow`
+ * (the web `<label htmlFor>`): at least 56 high, one `switch` for TalkBack
+ * named by the title, with the `action` switch hidden from it.
+ */
+export function SettingsToggleRow(t0) {
+  const $ = _c(40);
+  const {
+    title,
+    description,
+    action,
+    checked,
+    onCheckedChange,
+    disabled: t1,
+    accessibilityLabel,
+    className
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const titleSize = largerText ? "text-base" : "text-sm";
+  const descriptionSize = largerText ? "text-sm" : "text-xs";
+  let t2;
+  if ($[0] !== scheme || $[1] !== title || $[2] !== titleSize) {
+    t2 = typeof title === "string" ? <Text className={cn("font-instrument-sans-medium", titleSize)} style={[textStyle("foreground", scheme), sizeStyle(titleSize), typeStyle("medium")]}>{title}</Text> : title;
+    $[0] = scheme;
+    $[1] = title;
+    $[2] = titleSize;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== description || $[5] !== descriptionSize || $[6] !== scheme) {
+    t3 = description != null ? typeof description === "string" ? <Text className={cn("mt-1 font-instrument-sans", descriptionSize, "leading-relaxed")} style={[textStyle("muted", scheme), relaxedSizeStyle(descriptionSize)]}>{description}</Text> : description : null;
+    $[4] = description;
+    $[5] = descriptionSize;
+    $[6] = scheme;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== t2 || $[9] !== t3) {
+    t4 = <View className="min-w-0 flex-1">{t2}{t3}</View>;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      minHeight: MIN_TOUCH_TARGET
+    };
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const t6 = onCheckedChange != null;
+  const t7 = onCheckedChange ? "no-hide-descendants" : "auto";
+  let t8;
+  if ($[12] !== action || $[13] !== t6 || $[14] !== t7) {
+    t8 = <View className="shrink-0 items-center justify-center" style={t5} accessibilityElementsHidden={t6} importantForAccessibility={t7}>{action}</View>;
+    $[12] = action;
+    $[13] = t6;
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== t4 || $[17] !== t8) {
+    t9 = <>{t4}{t8}</>;
+    $[16] = t4;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  const content = t9;
+  if (!onCheckedChange) {
+    let t10;
+    if ($[19] !== className) {
+      t10 = cn("flex-row items-center justify-between gap-4 px-4 py-3", className);
+      $[19] = className;
+      $[20] = t10;
+    } else {
+      t10 = $[20];
+    }
+    let t11;
+    if ($[21] !== content || $[22] !== t10) {
+      t11 = <View className={t10}>{content}</View>;
+      $[21] = content;
+      $[22] = t10;
+      $[23] = t11;
+    } else {
+      t11 = $[23];
+    }
+    return t11;
+  }
+  const t10 = typeof title === "string" ? title : accessibilityLabel;
+  const t11 = typeof description === "string" ? description : undefined;
+  const t12 = Boolean(checked);
+  let t13;
+  if ($[24] !== disabled || $[25] !== t12) {
+    t13 = {
+      checked: t12,
+      disabled
+    };
+    $[24] = disabled;
+    $[25] = t12;
+    $[26] = t13;
+  } else {
+    t13 = $[26];
+  }
+  let t14;
+  if ($[27] !== checked || $[28] !== onCheckedChange) {
+    t14 = () => onCheckedChange(!checked);
+    $[27] = checked;
+    $[28] = onCheckedChange;
+    $[29] = t14;
+  } else {
+    t14 = $[29];
+  }
+  let t15;
+  if ($[30] !== className) {
+    t15 = cn("flex-row items-center justify-between gap-4 px-4 py-3", "min-h-14", className);
+    $[30] = className;
+    $[31] = t15;
+  } else {
+    t15 = $[31];
+  }
+  let t16;
+  if ($[32] !== content || $[33] !== disabled || $[34] !== t10 || $[35] !== t11 || $[36] !== t13 || $[37] !== t14 || $[38] !== t15) {
+    t16 = <Pressable accessibilityRole="switch" accessibilityLabel={t10} accessibilityHint={t11} accessibilityState={t13} disabled={disabled} onPress={t14} className={t15}>{content}</Pressable>;
+    $[32] = content;
+    $[33] = disabled;
+    $[34] = t10;
+    $[35] = t11;
+    $[36] = t13;
+    $[37] = t14;
+    $[38] = t15;
+    $[39] = t16;
+  } else {
+    t16 = $[39];
+  }
+  return t16;
+}

package/dist/settings/projectVMobileApps.js

@@ -0,0 +1,126 @@
+import { familyApp } from "../brand/familyApps";
+
+/** The Project V phone apps, in display order. */
+
+/**
+ * V Store's home screen. V Store's `app/[id]` route takes the app's Convex
+ * document `_id`, not its catalog id or Android package, and native-ui cannot
+ * know live Convex ids. So the store step opens V Store's home, not the app's page.
+ */
+export const VSTORE_HOME_URL = "vstore://";
+
+// Names and sites come from `FAMILY_APPS` where it has the app. V Store is not
+// a family app there (that file is a byte-identical copy of `@vvedantb/ui`).
+const vibot = familyApp("vibot");
+const verve = familyApp("verve");
+const velth = familyApp("velth");
+const vmem = familyApp("vmem");
+
+/** The five Project V phone apps, in display order. */
+export const PROJECT_V_MOBILE_APPS = [{
+  id: "vibot",
+  name: vibot.name,
+  description: "AI chat, agents and tools",
+  androidPackage: "com.projectvdotuk.vibot",
+  scheme: "vibot",
+  website: vibot.url
+}, {
+  id: "verve",
+  name: verve.name,
+  description: "Notes, pages and writing",
+  androidPackage: "com.projectvdotuk.verve",
+  scheme: "verve",
+  website: verve.url
+}, {
+  id: "velth",
+  name: velth.name,
+  description: "Health insights and camera scans",
+  androidPackage: "com.projectvdotuk.velth",
+  scheme: "velth",
+  website: velth.url
+}, {
+  id: "vmem",
+  name: vmem.name,
+  description: "Your personal memory",
+  androidPackage: "com.projectvdotuk.vmem",
+  scheme: "vmem",
+  website: vmem.url
+}, {
+  id: "vstore",
+  name: "V Store",
+  description: "Install Project V apps",
+  androidPackage: "com.projectvdotuk.vstore",
+  scheme: "vstore",
+  website: "https://v-store-chi.vercel.app"
+}];
+
+/** Entry of `PROJECT_V_MOBILE_APPS` for an app. */
+export function projectVMobileApp(id) {
+  return PROJECT_V_MOBILE_APPS.find(app => app.id === id);
+}
+
+/** The phone apps other than `current`, in display order. */
+export function otherProjectVMobileApps(current) {
+  return PROJECT_V_MOBILE_APPS.filter(app => app.id !== current);
+}
+
+/** Android intent URL that opens the installed app with this package. */
+export function androidIntentUrl(app) {
+  return `intent://#Intent;scheme=${app.scheme};package=${app.androidPackage};end`;
+}
+
+/** How `openProjectVApp` opened an app. */
+
+/** One URL to try, in order. `check`: ask `canOpenURL` first; otherwise try `openURL` and move on if it fails. */
+
+/**
+ * The URLs `openProjectVApp` tries, in order: the app's scheme; on Android an
+ * intent to its package; V Store's home (`VSTORE_HOME_URL`); the website.
+ */
+export function projectVAppOpenSteps(id, os) {
+  const app = projectVMobileApp(id);
+  const steps = [{
+    target: "app",
+    url: `${app.scheme}://`,
+    check: true
+  }];
+  if (os === "android") steps.push({
+    target: "app",
+    url: androidIntentUrl(app),
+    check: false
+  });
+  if (id !== "vstore") steps.push({
+    target: "store",
+    url: VSTORE_HOME_URL,
+    check: true
+  });
+  steps.push({
+    target: "website",
+    url: app.website,
+    check: false
+  });
+  return steps;
+}
+
+/** The part of React Native `Linking` that `openProjectVApp` uses. */
+
+/**
+ * Opens a Project V app: the app if installed, else V Store's home if V Store
+ * is installed, else its website. Resolves to what it opened, or
+ * `null` when every URL failed. Pass React Native `Linking` and `Platform.OS`.
+ *
+ * `canOpenURL` needs the schemes declared by the calling app:
+ * `LSApplicationQueriesSchemes` on iOS and `<queries>` on Android 11+.
+ */
+export async function openProjectVApp(id, linking, os) {
+  for (const step of projectVAppOpenSteps(id, os)) {
+    try {
+      if (step.check && !(await linking.canOpenURL(step.url))) continue;
+      await linking.openURL(step.url);
+      return step.target;
+    } catch {
+      // Not installed, or no handler: try the next URL.
+    }
+  }
+  return null;
+}

package/dist/settings/relaxedSizeStyle.js

@@ -0,0 +1,11 @@
+import { sizeStyle } from "../controlStyles";
+
+/**
+ * `sizeStyle(size)` with the Tailwind `leading-relaxed` line height (1.625 ×
+ * the size), for the web settings descriptions (`text-xs leading-relaxed` is
+ * 12 / 19.5). Set beside the `leading-relaxed` class. Kept for the settings
+ * files; the number lives in `sizeStyle`.
+ */
+export function relaxedSizeStyle(size) {
+  return sizeStyle(size, "relaxed");
+}

package/dist/sheetDrag.js

@@ -0,0 +1,76 @@
+/**
+ * The rules of a bottom sheet's drag to dismiss, as plain numbers, so they
+ * stay testable apart from the gesture. Distances are in points, `vy` in
+ * points per millisecond (the React Native `PanResponder` unit). Each is a
+ * worklet, so the Gesture Handler drag runs them on the UI thread.
+ */
+
+/** How far ahead (ms) the release velocity carries the sheet when deciding to close. */
+const PROJECTION_MS = 200;
+
+/** A flick down at this speed (pt/ms, so 1000 pt/s) closes the sheet however short the drag. */
+const FLICK_VELOCITY = 1;
+
+/** How far an upward pull may lift the sheet: less than the corner radius hidden below the screen. */
+export const SHEET_OVERPULL = 12;
+
+/** A drag that starts the sheet gesture: down, more vertical than sideways, past a small slop. */
+export function isSheetDragDown(dx, dy) {
+  "worklet";
+
+  return dy > 4 && Math.abs(dy) > Math.abs(dx);
+}
+
+/**
+ * Where the sheet sits for a drag that would put it `dy` below rest (where
+ * the drag started plus the finger's travel): it follows the finger down, and
+ * past rest upward it meets growing resistance, up to `SHEET_OVERPULL`.
+ */
+export function sheetDragOffset(dy) {
+  "worklet";
+
+  if (dy >= 0) return dy;
+  return -SHEET_OVERPULL * (1 - 1 / (1 - dy / (SHEET_OVERPULL * 4)));
+}
+
+/**
+ * The finger position (window `y`) a drag's travel counts from, so the point
+ * the finger holds stays under it: where it touched down, moved down by any
+ * scroll the same touch spent bringing the body back to its top before the
+ * sheet took over (`scrollAtDown` to `scrollNow`). Without that, the sheet
+ * would jump by the scroll when it takes over.
+ */
+export function sheetDragAnchor(downY, scrollAtDown, scrollNow) {
+  "worklet";
+
+  return downY + Math.max(0, scrollAtDown - scrollNow);
+}
+
+/**
+ * Whether a released drag closes the sheet: a quick flick down, or a drag
+ * whose position (`dy` below rest), carried on by its speed, passes half the
+ * sheet. A slow, short drag springs back.
+ */
+export function sheetDragDismisses({
+  dy,
+  vy,
+  height
+}) {
+  "worklet";
+
+  if (dy <= 0) return false;
+  if (vy >= FLICK_VELOCITY) return true;
+  return dy + Math.max(0, vy) * PROJECTION_MS > height / 2;
+}
+
+/**
+ * The velocity (pt/s) a sheet springs home with after a release at
+ * `position` (its offset from rest, up negative). Speed toward rest carries
+ * on; speed away from rest above the top is dropped, so a flick up does not
+ * lift the sheet off the bottom edge.
+ */
+export function sheetSnapVelocity(position, velocity) {
+  "worklet";
+
+  return position < 0 ? Math.max(0, velocity) : velocity;
+}

package/dist/svgA11y.js

@@ -0,0 +1,46 @@
+/**
+ * Accessibility and test props for a `react-native-svg` `Svg`. React Native
+ * Web maps `accessible`, the `accessibility*` props and `testID` on `View`
+ * and `Text`, but on web `Svg` is a DOM `<svg>` that takes its props as they
+ * are, so React logs each one as an unknown DOM prop. Web gets ARIA and
+ * `data-testid`; iOS and Android keep the native props. No React Native
+ * import, so the tests can load this file.
+ */
+
+/**
+ * Spread on the `Svg`. With `title` it is an image with that name; without it,
+ * it is hidden from assistive tech. Pass `Platform.OS` as `os`. Without
+ * `testID` the result has no test id key, not one set to `undefined`.
+ */
+export function svgA11yProps({
+  title,
+  testID
+}, os) {
+  if (os === "web") {
+    const id = testID === undefined ? {} : {
+      "data-testid": testID
+    };
+    return title ? {
+      role: "img",
+      "aria-label": title,
+      ...id
+    } : {
+      "aria-hidden": true,
+      ...id
+    };
+  }
+  const id = testID === undefined ? {} : {
+    testID
+  };
+  return title ? {
+    accessible: true,
+    accessibilityRole: "image",
+    accessibilityLabel: title,
+    ...id
+  } : {
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    ...id
+  };
+}