@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/brand/AppWordmark.jsx

@@ -0,0 +1,138 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, Text, View } from "react-native";
+import { cn } from "../cn";
+import { tokens } from "../tokens";
+import { WORDMARK } from "../typography";
+import { useScheme } from "../useScheme";
+import { APP_ICONS } from "./AppIcons";
+
+/** The five product apps. `projectv` keeps its Michroma wordmark and never uses `AppWordmark`. `eva` and `bee` are icons only. */
+
+/**
+ * Wordmark for a product app: the `APP_ICONS` glyph, then the lowercase name in
+ * Instrument Sans 500 (`font-instrument-sans-medium`) with -0.02em letter
+ * spacing, as the web `AppWordmark`. No serif, no italic.
+ */
+export function AppWordmark(t0) {
+  const $ = _c(33);
+  const {
+    app,
+    size: t1,
+    icon: t2,
+    color,
+    onPress,
+    accessibilityLabel,
+    className,
+    testID
+  } = t0;
+  const size = t1 === undefined ? 24 : t1;
+  const icon = t2 === undefined ? true : t2;
+  const scheme = useScheme();
+  const Icon = APP_ICONS[app];
+  const fg = color ?? tokens.color.foreground[scheme];
+  let t3;
+  if ($[0] !== Icon || $[1] !== fg || $[2] !== icon || $[3] !== size) {
+    t3 = icon ? <Icon size={Math.round(size * WORDMARK.iconScale)} color={fg} /> : null;
+    $[0] = Icon;
+    $[1] = fg;
+    $[2] = icon;
+    $[3] = size;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const t4 = size * WORDMARK.letterSpacingEm;
+  let t5;
+  if ($[5] !== fg || $[6] !== size || $[7] !== t4) {
+    t5 = {
+      fontSize: size,
+      lineHeight: size,
+      letterSpacing: t4,
+      fontWeight: WORDMARK.fontWeight,
+      color: fg,
+      includeFontPadding: false
+    };
+    $[5] = fg;
+    $[6] = size;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== app || $[10] !== t5) {
+    t6 = <Text className={WORDMARK.fontClass} style={t5}>{app}</Text>;
+    $[9] = app;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] !== t3 || $[13] !== t6) {
+    t7 = <>{t3}{t6}</>;
+    $[12] = t3;
+    $[13] = t6;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  const content = t7;
+  let rowClassName;
+  let rowStyle;
+  let t8;
+  if ($[15] !== accessibilityLabel || $[16] !== app || $[17] !== className || $[18] !== content || $[19] !== onPress || $[20] !== size || $[21] !== testID) {
+    t8 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      rowClassName = cn("flex-row items-center", className);
+      const t9 = size * WORDMARK.gapEm;
+      let t10;
+      if ($[25] !== t9) {
+        t10 = {
+          gap: t9
+        };
+        $[25] = t9;
+        $[26] = t10;
+      } else {
+        t10 = $[26];
+      }
+      rowStyle = t10;
+      if (onPress) {
+        t8 = <Pressable testID={testID} accessibilityRole="link" accessibilityLabel={accessibilityLabel ?? app} onPress={onPress} className={cn(rowClassName, "active:opacity-70")} style={rowStyle}>{content}</Pressable>;
+        break bb0;
+      }
+    }
+    $[15] = accessibilityLabel;
+    $[16] = app;
+    $[17] = className;
+    $[18] = content;
+    $[19] = onPress;
+    $[20] = size;
+    $[21] = testID;
+    $[22] = rowClassName;
+    $[23] = rowStyle;
+    $[24] = t8;
+  } else {
+    rowClassName = $[22];
+    rowStyle = $[23];
+    t8 = $[24];
+  }
+  if (t8 !== Symbol.for("react.early_return_sentinel")) {
+    return t8;
+  }
+  const t9 = accessibilityLabel ?? app;
+  let t10;
+  if ($[27] !== content || $[28] !== rowClassName || $[29] !== rowStyle || $[30] !== t9 || $[31] !== testID) {
+    t10 = <View testID={testID} accessible={true} accessibilityLabel={t9} className={rowClassName} style={rowStyle}>{content}</View>;
+    $[27] = content;
+    $[28] = rowClassName;
+    $[29] = rowStyle;
+    $[30] = t9;
+    $[31] = testID;
+    $[32] = t10;
+  } else {
+    t10 = $[32];
+  }
+  return t10;
+}
+AppWordmark.displayName = "AppWordmark";

package/dist/brand/GoogleMark.jsx

@@ -0,0 +1,71 @@
+import { c as _c } from "react/compiler-runtime";
+import { Platform } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
+/** The four paths of the Google "G" on the 24 grid, each in its brand colour. */
+const GOOGLE_G = [{
+  fill: "#4285F4",
+  d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+}, {
+  fill: "#34A853",
+  d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+}, {
+  fill: "#FBBC05",
+  d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+}, {
+  fill: "#EA4335",
+  d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+}];
+
+/**
+ * The multicolour Google "G", for a "Continue with Google" button:
+ * `<Button variant="outline" leftIcon={<GoogleMark />}>`. The four colours are
+ * Google's and fixed, so it takes no `color`.
+ */
+export function GoogleMark(t0) {
+  const $ = _c(8);
+  const {
+    size: t1,
+    title,
+    testID,
+    style
+  } = t0;
+  const size = t1 === undefined ? 18 : t1;
+  let t2;
+  if ($[0] !== testID || $[1] !== title) {
+    t2 = svgA11yProps({
+      title,
+      testID
+    }, Platform.OS);
+    $[0] = testID;
+    $[1] = title;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = GOOGLE_G.map(_temp);
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== size || $[5] !== style || $[6] !== t2) {
+    t4 = <Svg width={size} height={size} viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" {...t2} style={style}>{t3}</Svg>;
+    $[4] = size;
+    $[5] = style;
+    $[6] = t2;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
+}
+function _temp(t0) {
+  const {
+    fill,
+    d
+  } = t0;
+  return <Path key={fill} d={d} fill={fill} />;
+}

package/dist/brand/ProviderIcon.jsx

@@ -0,0 +1,192 @@
+import { c as _c } from "react/compiler-runtime";
+import { Platform } from "react-native";
+import Svg, { Path, Rect } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
+import { useScheme } from "../useScheme";
+
+/** A fill that follows the colour scheme, as the web `text-black dark:text-white`. */
+
+/** Providers with a mark. Any other provider draws the Claude mark, as the web. */
+
+/**
+ * The provider marks of the web `ProviderIcon` (`@vvedantb/ui`
+ * `ai-elements/provider-icon.tsx`): the same path data, viewBoxes and fills.
+ * A test checks them against the web source.
+ */
+export const PROVIDER_MARKS = {
+  claude: {
+    viewBox: "0 0 24 24",
+    layers: [{
+      fill: "#D97757",
+      d: "m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z"
+    }]
+  },
+  codex: {
+    viewBox: "0 0 256 260",
+    layers: [{
+      fill: {
+        light: "#000",
+        dark: "#fff"
+      },
+      d: "M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z"
+    }]
+  },
+  opencode: {
+    viewBox: "0 0 512 512",
+    layers: [{
+      square: 512,
+      fill: "#FDFCFC"
+    }, {
+      d: "M320 224V352H192V224H320Z",
+      fill: "#E6E5E6"
+    }, {
+      d: "M384 416H128V96H384V416ZM320 160H192V352H320V160Z",
+      fill: "#17181C",
+      evenOdd: true
+    }]
+  },
+  cursor: {
+    viewBox: "0 0 466.73 532.09",
+    layers: [{
+      fill: {
+        light: "#26251E",
+        dark: "#EDECEC"
+      },
+      d: "M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"
+    }]
+  }
+};
+
+/** The mark for `provider`, the Claude mark for an unknown one (web `ProviderIcon` default). */
+export function providerMark(provider) {
+  switch (provider) {
+    case "codex":
+    case "opencode":
+    case "cursor":
+      return PROVIDER_MARKS[provider];
+    default:
+      return PROVIDER_MARKS.claude;
+  }
+}
+
+/**
+ * The provider's name in a model picker, as the web `getProviderLabel`
+ * (`ai-elements/model-picker-types.ts`): "Claude", "GPT" for Codex,
+ * "Opencode", "Cursor", and any other provider as given.
+ */
+export function providerLabel(provider) {
+  switch (provider) {
+    case "claude":
+      return "Claude";
+    case "codex":
+      return "GPT";
+    case "opencode":
+      return "Opencode";
+    case "cursor":
+      return "Cursor";
+    default:
+      return provider;
+  }
+}
+/**
+ * The brand mark of an AI provider, as the web `ProviderIcon`. The marks keep
+ * their brand colours; the OpenAI and Cursor marks switch with the scheme.
+ */
+export function ProviderIcon(t0) {
+  const $ = _c(28);
+  const {
+    provider,
+    size: t1,
+    title,
+    testID,
+    style
+  } = t0;
+  const size = t1 === undefined ? 14 : t1;
+  const scheme = useScheme();
+  let T0;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  if ($[0] !== provider || $[1] !== scheme || $[2] !== size || $[3] !== style || $[4] !== testID || $[5] !== title) {
+    const {
+      viewBox,
+      layers
+    } = providerMark(provider);
+    let t8;
+    if ($[13] !== scheme) {
+      t8 = fill => typeof fill === "string" ? fill : fill[scheme];
+      $[13] = scheme;
+      $[14] = t8;
+    } else {
+      t8 = $[14];
+    }
+    const paint = t8;
+    T0 = Svg;
+    t2 = size;
+    t3 = size;
+    t4 = viewBox;
+    if ($[15] !== testID || $[16] !== title) {
+      t5 = svgA11yProps({
+        title,
+        testID
+      }, Platform.OS);
+      $[15] = testID;
+      $[16] = title;
+      $[17] = t5;
+    } else {
+      t5 = $[17];
+    }
+    t6 = style;
+    let t9;
+    if ($[18] !== paint) {
+      t9 = (layer, index) => "square" in layer ? <Rect key={index} width={layer.square} height={layer.square} fill={paint(layer.fill)} /> : <Path key={index} d={layer.d} fill={paint(layer.fill)} {...layer.evenOdd ? {
+        fillRule: "evenodd",
+        clipRule: "evenodd"
+      } : {}} />;
+      $[18] = paint;
+      $[19] = t9;
+    } else {
+      t9 = $[19];
+    }
+    t7 = layers.map(t9);
+    $[0] = provider;
+    $[1] = scheme;
+    $[2] = size;
+    $[3] = style;
+    $[4] = testID;
+    $[5] = title;
+    $[6] = T0;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = t6;
+    $[12] = t7;
+  } else {
+    T0 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+    t4 = $[9];
+    t5 = $[10];
+    t6 = $[11];
+    t7 = $[12];
+  }
+  let t8;
+  if ($[20] !== T0 || $[21] !== t2 || $[22] !== t3 || $[23] !== t4 || $[24] !== t5 || $[25] !== t6 || $[26] !== t7) {
+    t8 = <T0 width={t2} height={t3} viewBox={t4} {...t5} style={t6}>{t7}</T0>;
+    $[20] = T0;
+    $[21] = t2;
+    $[22] = t3;
+    $[23] = t4;
+    $[24] = t5;
+    $[25] = t6;
+    $[26] = t7;
+    $[27] = t8;
+  } else {
+    t8 = $[27];
+  }
+  return t8;
+}

package/dist/brand/familyApps.js

@@ -0,0 +1,33 @@
+/** Apps in the Project V family. `eva` and `bee` have marks and icons but are not family apps. */
+
+/** Single source for family app display names and sites, in display order. */
+export const FAMILY_APPS = [{
+  app: "vibot",
+  name: "vibot",
+  url: "https://vibot.projectv.uk"
+}, {
+  app: "verve",
+  name: "Verve",
+  url: "https://verve.projectv.uk"
+}, {
+  app: "velth",
+  name: "Velth",
+  url: "https://velth.projectv.uk"
+}, {
+  app: "vmem",
+  name: "vmem",
+  url: "https://vmem.projectv.uk"
+}, {
+  app: "vhub",
+  name: "vhub",
+  url: "https://vhub.projectv.uk"
+}, {
+  app: "projectv",
+  name: "Project V",
+  url: "https://projectv.uk"
+}];
+
+/** Entry of `FAMILY_APPS` for an app. */
+export function familyApp(app) {
+  return FAMILY_APPS.find(entry => entry.app === app);
+}

package/dist/brand/index.js

@@ -0,0 +1,11 @@
+// `svg.ts`, `familyApps.ts` and `vProAppBenefits.ts` are byte-identical copies of
+// `@vvedantb/ui` `src/brand/` (pure data, no imports beyond each other). A test
+// in this package fails when they differ: change both together.
+export { APP_ICONS, IconBee, IconEva, IconProjectV, IconVelth, IconVerve, IconVhub, IconVibot, IconVmem } from "./AppIcons";
+export { AppMark } from "./AppMark";
+export { AppWordmark } from "./AppWordmark";
+export { GoogleMark } from "./GoogleMark";
+export { PROVIDER_MARKS, ProviderIcon, providerLabel, providerMark } from "./ProviderIcon";
+export { APP_MARKS, APP_MARK_CROP_VIEWBOX, APP_MARK_VIEWBOX, APP_MARK_VIEWBOX_START, PROJECTV_MARK_VIEWBOX, APP_MARK_SVG, APP_NAMES, APP_TILE_LIGHT_SVG, APP_TILE_SVG, appAdaptiveSvg, appExtension128Svg, appMarkSvg, appTileSvg, markAspect, markBBox, markLinecap, markStrokeWidth, pathBBox } from "./svg";
+export { FAMILY_APPS, familyApp } from "./familyApps";
+export { V_PRO_APP_BENEFITS } from "./vProAppBenefits";