@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/marketing/UpgradeToProCard.jsx

@@ -0,0 +1,164 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, Text, View } from "react-native";
+import { cn } from "../cn";
+import { sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { tokens } from "../tokens";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+
+/** Web `rounded-2xl` (16) on the card. */
+const RADIUS = tokens.radius.lg;
+
+// The web `Button` `sm` (`h-8 px-3 text-xs`) uses `max-sm:hit-target`, 8 on
+// each side: 32 + 16 = 48, as the native `Button` `small`.
+const HIT_SLOP = 8;
+/**
+ * Upgrade prompt, the native `SidebarUpgradeCard`: the title and an "Upgrade"
+ * pill on a secondary surface, with no mark. It does not check the plan; the
+ * app hides it when the user is already on Pro.
+ */
+export function UpgradeToProCard(t0) {
+  const $ = _c(38);
+  const {
+    onUpgrade,
+    collapsed: t1,
+    title: t2,
+    ctaLabel: t3,
+    className,
+    testID
+  } = t0;
+  const collapsed = t1 === undefined ? false : t1;
+  const title = t2 === undefined ? "Upgrade to Pro" : t2;
+  const ctaLabel = t3 === undefined ? "Upgrade" : t3;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const titleSize = largerText ? "text-lg" : "text-sm";
+  const ctaSize = largerText ? "text-base" : "text-sm";
+  let t4;
+  if ($[0] !== ctaSize || $[1] !== largerText || $[2] !== onUpgrade || $[3] !== scheme || $[4] !== testID) {
+    t4 = (label, accessibilityLabel) => <Pressable testID={testID ? `${testID}-cta` : undefined} accessibilityRole="button" accessibilityLabel={accessibilityLabel} onPress={onUpgrade} hitSlop={HIT_SLOP} className={cn("shrink-0 items-center justify-center rounded-full active:opacity-80", largerText ? "min-h-12 px-4" : "min-h-9 px-3")} style={{
+      backgroundColor: tokens.color.foreground[scheme]
+    }}><Text className={cn("font-instrument-sans-medium", ctaSize)} style={[{
+        color: tokens.color.background[scheme]
+      }, sizeStyle(ctaSize), typeStyle("medium")]}>{label}</Text></Pressable>;
+    $[0] = ctaSize;
+    $[1] = largerText;
+    $[2] = onUpgrade;
+    $[3] = scheme;
+    $[4] = testID;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const pill = t4;
+  if (collapsed) {
+    let t5;
+    if ($[6] !== pill || $[7] !== title) {
+      t5 = pill("Pro", title);
+      $[6] = pill;
+      $[7] = title;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    let t6;
+    if ($[9] !== className || $[10] !== t5 || $[11] !== testID) {
+      t6 = <View testID={testID} className={className}>{t5}</View>;
+      $[9] = className;
+      $[10] = t5;
+      $[11] = testID;
+      $[12] = t6;
+    } else {
+      t6 = $[12];
+    }
+    return t6;
+  }
+  let t5;
+  if ($[13] !== className) {
+    t5 = cn("flex-row items-center justify-between gap-3 bg-surface-secondary px-3 py-2.5", className);
+    $[13] = className;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      borderRadius: RADIUS
+    };
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== titleSize) {
+    t7 = cn("min-w-0 flex-1 font-instrument-sans-semibold", titleSize);
+    $[16] = titleSize;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== scheme) {
+    t8 = textStyle("foreground", scheme);
+    $[18] = scheme;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t9;
+  if ($[20] !== titleSize) {
+    t9 = sizeStyle(titleSize);
+    $[20] = titleSize;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = typeStyle("semibold");
+    $[22] = t10;
+  } else {
+    t10 = $[22];
+  }
+  let t11;
+  if ($[23] !== t8 || $[24] !== t9) {
+    t11 = [t8, t9, t10];
+    $[23] = t8;
+    $[24] = t9;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  let t12;
+  if ($[26] !== t11 || $[27] !== t7 || $[28] !== title) {
+    t12 = <Text numberOfLines={1} className={t7} style={t11}>{title}</Text>;
+    $[26] = t11;
+    $[27] = t7;
+    $[28] = title;
+    $[29] = t12;
+  } else {
+    t12 = $[29];
+  }
+  let t13;
+  if ($[30] !== ctaLabel || $[31] !== pill) {
+    t13 = pill(ctaLabel);
+    $[30] = ctaLabel;
+    $[31] = pill;
+    $[32] = t13;
+  } else {
+    t13 = $[32];
+  }
+  let t14;
+  if ($[33] !== t12 || $[34] !== t13 || $[35] !== t5 || $[36] !== testID) {
+    t14 = <View testID={testID} className={t5} style={t6}>{t12}{t13}</View>;
+    $[33] = t12;
+    $[34] = t13;
+    $[35] = t5;
+    $[36] = testID;
+    $[37] = t14;
+  } else {
+    t14 = $[37];
+  }
+  return t14;
+}

package/dist/marketing/pricing.js

@@ -0,0 +1,34 @@
+// Plan types and pure helpers for `PricingModal`, the same shapes and rules as
+// the web `PricingModal` multi-plan layout. No React Native imports.
+
+import { V_PRO_APP_BENEFITS } from "../brand/vProAppBenefits";
+/** `featured`, else `highlighted` (the web rule: `featured ?? highlighted`). */
+export function isEmphasised(plan) {
+  return Boolean(plan.featured ?? plan.highlighted);
+}
+
+/** The plan's app groups: its own, else `V_PRO_APP_BENEFITS` for the emphasised plan, else none. */
+export function planAppBenefits(plan) {
+  return plan.appBenefits ?? (isEmphasised(plan) ? V_PRO_APP_BENEFITS : undefined);
+}
+
+/** Stable sort: the current app's group first, the rest in their order. */
+export function sortAppBenefits(groups, currentApp) {
+  return [...groups].sort((a, b) => Number(b.app === currentApp) - Number(a.app === currentApp));
+}
+
+/** Label, variant and state of a plan's button, as on the web. */
+export function planButton(plan) {
+  if (plan.current) {
+    return {
+      label: "Current plan",
+      variant: "outline",
+      disabled: true
+    };
+  }
+  return {
+    label: plan.ctaLabel ?? "Get started",
+    variant: isEmphasised(plan) ? "default" : "secondary",
+    disabled: false
+  };
+}