@vvedantb/native-ui 0.2.0 → 0.3.12

package/src/brand/svg.ts

@@ -0,0 +1,263 @@
+// Geometry and raw SVG strings for the family app marks. No imports, so the
+// asset script can load this file directly with Node.
+
+export const APP_NAMES = ["projectv", "vibot", "vhub", "vmem", "verve", "velth"] as const;
+
+export type AppName = (typeof APP_NAMES)[number];
+
+/** `mark`: glyph only on an equalised square viewBox, follows `currentColor`. `tile`: white glyph on a black tile. `tile-light`: black glyph on a white tile. */
+export type AppMarkVariant = "mark" | "tile" | "tile-light";
+
+export const MARK_VIEWBOX = "0 0 1024 1024";
+export const MARK_STROKE_WIDTH = 50;
+export const TILE_RADIUS = 224;
+
+export type MarkShape = {
+  /** Filled shapes (no stroke) versus lines (50 wide, round caps by default). */
+  kind: "fill" | "stroke";
+  /** Path data on the 1024 grid. */
+  paths: readonly string[];
+  /** Stroke width override on the 1024 grid. Defaults to `MARK_STROKE_WIDTH`. */
+  strokeWidth?: number;
+  /** Line cap override. Defaults to `"round"`. */
+  linecap?: "butt" | "round";
+};
+
+/** Stroke width of a mark on the 1024 grid. */
+export function markStrokeWidth(app: AppName): number {
+  return APP_MARKS[app].strokeWidth ?? MARK_STROKE_WIDTH;
+}
+
+/** Line cap of a mark. */
+export function markLinecap(app: AppName): "butt" | "round" {
+  return APP_MARKS[app].linecap ?? "round";
+}
+
+/**
+ * Glyphs sized by one rule: longest side = 512 * min(1.2, aspect^0.25), centred halfway between
+ * the bounding-box centre and the centre of mass. `verve` and `velth` are the final vectors.
+ * The others are traced from the approved 1024px renders.
+ */
+export const APP_MARKS: Record<AppName, MarkShape> = {
+  projectv: {
+    kind: "fill",
+    paths: ["M172 398L260 397L418 558L580 377L858 378L824 415L604 415L452 598L466 611L622 433L808 433L773 471L658 471L491 671L442 672Z"],
+  },
+  vibot: {
+    kind: "fill",
+    paths: [
+      "M295 314L396 314L396 574C520 540 620 440 655 314L711 314C680 470 560 590 396 627L390 627L390 651L396 651C560 610 700 480 734 314L789 314C740 540 560 712 295 712Z",
+    ],
+  },
+  vhub: {
+    kind: "stroke",
+    paths: ["M211 512L743 512", "M415 512C500 512 540 363 743 363", "M415 512C500 512 540 661 743 661"],
+  },
+  vmem: {
+    kind: "stroke",
+    strokeWidth: 58,
+    linecap: "butt",
+    paths: [
+      "M693.2 379.5A227.25 227.25 0 0 1 581.0 732.7",
+      "M442.5 732.7A227.25 227.25 0 0 1 330.9 378.7",
+      "M397.3 319.9A227.25 227.25 0 0 1 627.1 320.4",
+    ],
+  },
+  verve: {
+    kind: "stroke",
+    paths: [
+      "M285.4 344.1Q428.6 344.1 512 552.6Q595.4 344.1 738.6 344.1",
+      "M285.4 344.1L285.4 579.8Q428.6 579.8 512 706.7Q595.4 579.8 738.6 579.8L738.6 344.1",
+    ],
+  },
+  velth: {
+    kind: "stroke",
+    paths: [
+      "M512 732.3C379.8 652.1 289.7 471.9 299.7 301.6C419.9 371.7 500 552 512 732.3Z",
+      "M512 732.3C644.2 652.1 734.3 471.9 724.3 301.6C604.1 371.7 524 552 512 732.3Z",
+    ],
+  },
+};
+
+type Point = [number, number];
+type Box = [minX: number, minY: number, maxX: number, maxY: number];
+
+/** Roots in (0, 1) of the derivative of a Bezier with 1D control values `v` (quadratic or cubic). */
+function bezierExtrema(v: number[]): number[] {
+  const roots: number[] = [];
+  if (v.length === 3) {
+    const d = v[0]! - 2 * v[1]! + v[2]!;
+    if (d !== 0) roots.push((v[0]! - v[1]!) / d);
+  } else {
+    const a = -v[0]! + 3 * v[1]! - 3 * v[2]! + v[3]!;
+    const b = 2 * (v[0]! - 2 * v[1]! + v[2]!);
+    const c = v[1]! - v[0]!;
+    if (Math.abs(a) < 1e-12) {
+      if (b !== 0) roots.push(-c / b);
+    } else {
+      const disc = b * b - 4 * a * c;
+      if (disc >= 0) roots.push((-b + Math.sqrt(disc)) / (2 * a), (-b - Math.sqrt(disc)) / (2 * a));
+    }
+  }
+  return roots.filter((t) => t > 0 && t < 1);
+}
+
+function bezierAt(v: number[], t: number): number {
+  const u = 1 - t;
+  const [p0, p1, p2, p3] = v as [number, number, number, number];
+  return v.length === 3 ? u * u * p0 + 2 * u * t * p1 + t * t * p2 : u ** 3 * p0 + 3 * u * u * t * p1 + 3 * u * t * t * p2 + t ** 3 * p3;
+}
+
+/** Extreme points of an SVG elliptical arc (endpoint form, no rotation), including both ends. */
+function arcPoints(from: Point, [rx0, ry0, , large, sweep, x, y]: [number, number, number, number, number, number, number]): Point[] {
+  const [x0, y0] = from;
+  let rx = Math.abs(rx0);
+  let ry = Math.abs(ry0);
+  const dx = (x0 - x) / 2;
+  const dy = (y0 - y) / 2;
+  const lambda = (dx * dx) / (rx * rx) + (dy * dy) / (ry * ry);
+  if (lambda > 1) {
+    rx *= Math.sqrt(lambda);
+    ry *= Math.sqrt(lambda);
+  }
+  const num = rx * rx * ry * ry - rx * rx * dy * dy - ry * ry * dx * dx;
+  const den = rx * rx * dy * dy + ry * ry * dx * dx;
+  const k = (large === sweep ? -1 : 1) * Math.sqrt(Math.max(0, num / den));
+  const cx = k * ((rx * dy) / ry) + (x0 + x) / 2;
+  const cy = k * (-(ry * dx) / rx) + (y0 + y) / 2;
+  const a0 = Math.atan2((y0 - cy) / ry, (x0 - cx) / rx);
+  let delta = Math.atan2((y - cy) / ry, (x - cx) / rx) - a0;
+  if (sweep && delta < 0) delta += 2 * Math.PI;
+  if (!sweep && delta > 0) delta -= 2 * Math.PI;
+  const points: Point[] = [from, [x, y]];
+  for (let q = -6; q <= 6; q++) {
+    const a = (q * Math.PI) / 2;
+    const t = (a - a0) / delta;
+    if (t > 0 && t < 1) points.push([cx + rx * Math.cos(a), cy + ry * Math.sin(a)]);
+  }
+  return points;
+}
+
+/** Exact bounding box of absolute `M`, `L`, `Q`, `C` and `A` path data (the only commands the marks use). Returns [minX, minY, maxX, maxY]. */
+export function pathBBox(d: string): Box {
+  const tokens = d.match(/[MLQCA]|-?\d*\.?\d+(?:e-?\d+)?/g) ?? [];
+  const points: Point[] = [];
+  let cmd = "";
+  let cur: Point = [0, 0];
+  const argc: Record<string, number> = { M: 2, L: 2, Q: 4, C: 6, A: 7 };
+  for (let i = 0; i < tokens.length; ) {
+    if (/[A-Z]/.test(tokens[i]!)) cmd = tokens[i++]!;
+    const n = argc[cmd];
+    if (!n) throw new Error(`Unsupported path command: ${cmd}`);
+    const a = tokens.slice(i, i + n).map(Number);
+    i += n;
+    const end: Point = [a[n - 2]!, a[n - 1]!];
+    if (cmd === "Q" || cmd === "C") {
+      const xs = [cur[0], ...a.filter((_, j) => j % 2 === 0)];
+      const ys = [cur[1], ...a.filter((_, j) => j % 2 === 1)];
+      for (const t of new Set([...bezierExtrema(xs), ...bezierExtrema(ys)])) points.push([bezierAt(xs, t), bezierAt(ys, t)]);
+    } else if (cmd === "A") {
+      points.push(...arcPoints(cur, a as Parameters<typeof arcPoints>[1]));
+    }
+    points.push(end);
+    cur = end;
+  }
+  return [Math.min(...points.map((p) => p[0])), Math.min(...points.map((p) => p[1])), Math.max(...points.map((p) => p[0])), Math.max(...points.map((p) => p[1]))];
+}
+
+/** Tight box of a mark: union of its paths, grown by half the stroke width for stroke marks. Returns [minX, minY, maxX, maxY]. */
+export function markBBox(app: AppName): Box {
+  const { kind, paths } = APP_MARKS[app];
+  const boxes = paths.map(pathBBox);
+  const pad = kind === "stroke" ? markStrokeWidth(app) / 2 : 0;
+  return [Math.min(...boxes.map((b) => b[0])) - pad, Math.min(...boxes.map((b) => b[1])) - pad, Math.max(...boxes.map((b) => b[2])) + pad, Math.max(...boxes.map((b) => b[3])) + pad];
+}
+
+
+/**
+ * Frame size for the five app glyphs (`vibot`, `vhub`, `vmem`, `verve`, `velth`) in the plain logo (`variant="mark"`,
+ * `appMarkSvg`, `Icon*`): a 629 x 629 square, the union of their `markBBox` results on the 1024 tile grid
+ * (x 186 to 789, y 259.96 to 761.7) at side max(width, height) x 1.04 (about 4% padding), rounded outward.
+ * All five use this side, so glyph scale stays equal. Only the size is shared: each app has its own origin in
+ * `APP_MARK_VIEWBOX`. `projectv` is left out so its wide brand mark does not shrink the app glyphs.
+ */
+export const APP_MARK_CROP_VIEWBOX = "173 197 629 629";
+
+/**
+ * `projectv` (a brand mark, not an app) keeps a 687 x 687 frame, centred on `markBBox("projectv")`
+ * (x 172 to 858, y 377 to 672, centre 515 x 524.5), with no extra padding.
+ */
+export const PROJECTV_MARK_VIEWBOX = "171.5 181 687 687";
+
+/**
+ * Plain-mark viewBox per app. Always square. The five apps keep one 629 side (equal scale), and each origin is
+ * `markBBox(app)` centre minus 314.5 on both axes, so every glyph sits centred in its own frame. `projectv` uses
+ * its 687 frame, centre minus 343.5. Hardcoded; checked against `markBBox` in tests.
+ */
+export const APP_MARK_VIEWBOX: Record<AppName, string> = {
+  projectv: PROJECTV_MARK_VIEWBOX,
+  vibot: "227.5 198.5 629 629",
+  vhub: "162.5 197.5 629 629",
+  vmem: "197.24772201231343 196.33100022273135 629 629",
+  verve: "197.5 210.9 629 629",
+  velth: "197.5 202.45 629 629",
+};
+
+/**
+ * Start-aligned viewBox per app, for `Icon*` `align="start"`. Same side and same y as `APP_MARK_VIEWBOX`; x is
+ * `markBBox(app)` minX, so the glyph's left ink edge sits flush with the frame's left edge. Hardcoded; checked
+ * against `markBBox` in tests.
+ */
+export const APP_MARK_VIEWBOX_START: Record<AppName, string> = {
+  projectv: "172 181 687 687",
+  vibot: "295 198.5 629 629",
+  vhub: "186 197.5 629 629",
+  vmem: "255.5301217210191 196.33100022273135 629 629",
+  verve: "260.4 210.9 629 629",
+  velth: "273.9433593555699 202.45 629 629",
+};
+
+/** Width over height of a mark's viewBox. Always about 1, because the viewBoxes are square. Kept for API stability; do not use it for sizing. */
+export function markAspect(app: AppName): number {
+  const [, , w = 1, h = 1] = APP_MARK_VIEWBOX[app].split(" ").map(Number);
+  return w / h;
+}
+
+const NS = 'xmlns="http://www.w3.org/2000/svg"';
+
+/** Attributes that paint the glyph in `color`. */
+export function markPaintAttrs(app: AppName, color: string): string {
+  return APP_MARKS[app].kind === "fill" ? `fill="${color}"` : `fill="none" stroke="${color}" stroke-width="${markStrokeWidth(app)}" stroke-linecap="${markLinecap(app)}" stroke-linejoin="round"`;
+}
+
+function pathElements(app: AppName): string {
+  return APP_MARKS[app].paths.map((d) => `<path d="${d}"/>`).join("");
+}
+
+/** Glyph only on its equalised square viewBox, painted with `color` (default `currentColor`). */
+export function appMarkSvg(app: AppName, color = "currentColor"): string {
+  return `<svg ${NS} viewBox="${APP_MARK_VIEWBOX[app]}" ${markPaintAttrs(app, color)}>${pathElements(app)}</svg>\n`;
+}
+
+/** Tile with a glyph. `radius` 0 gives a full-bleed square (apple-touch, maskable). */
+export function appTileSvg(app: AppName, tone: "dark" | "light" = "dark", radius = TILE_RADIUS): string {
+  const [bg, fg] = tone === "dark" ? ["#000", "#fff"] : ["#fff", "#000"];
+  const rx = radius > 0 ? ` rx="${radius}"` : "";
+  return `<svg ${NS} viewBox="${MARK_VIEWBOX}"><rect width="1024" height="1024"${rx} fill="${bg}"/><g ${markPaintAttrs(app, fg)}>${pathElements(app)}</g></svg>\n`;
+}
+
+/** Android adaptive-icon layer: 432 canvas, glyph scaled into the 288 inner square. */
+export function appAdaptiveSvg(app: AppName, color: string): string {
+  const scale = 288 / 1024;
+  return `<svg ${NS} viewBox="0 0 432 432"><g transform="translate(216 216) scale(${scale}) translate(-512 -512)" ${markPaintAttrs(app, color)}>${pathElements(app)}</g></svg>\n`;
+}
+
+/** Chrome extension 128px icon: 96px tile plus 16px transparent padding. */
+export function appExtension128Svg(app: AppName): string {
+  const inner = appTileSvg(app).replace(`<svg ${NS} viewBox="${MARK_VIEWBOX}">`, `<svg ${NS} x="16" y="16" width="96" height="96" viewBox="${MARK_VIEWBOX}">`);
+  return `<svg ${NS} viewBox="0 0 128 128">${inner.trim()}</svg>\n`;
+}
+
+export const APP_MARK_SVG = Object.fromEntries(APP_NAMES.map((app) => [app, appMarkSvg(app)])) as Record<AppName, string>;
+export const APP_TILE_SVG = Object.fromEntries(APP_NAMES.map((app) => [app, appTileSvg(app)])) as Record<AppName, string>;
+export const APP_TILE_LIGHT_SVG = Object.fromEntries(APP_NAMES.map((app) => [app, appTileSvg(app, "light")])) as Record<AppName, string>;

package/src/brand/vProAppBenefits.ts

@@ -0,0 +1,22 @@
+import type { AppName } from "./svg";
+
+/** Benefits for one app, shown under that app's icon and name. */
+export type PricingPlanAppBenefit = {
+  app: Exclude<AppName, "projectv">;
+  items: readonly string[];
+};
+
+/** Approved per-app copy for V Pro, in display order. */
+export const V_PRO_APP_BENEFITS: readonly PricingPlanAppBenefit[] = [
+  {
+    app: "vibot",
+    items: [
+      "Higher AI limits/usage",
+      "Smarter AI for chats, documents & sub-agents",
+    ],
+  },
+  { app: "vmem", items: ["Unlimited memories", "Higher AI search & connected-tool limits"] },
+  { app: "vhub", items: ["Unlimited scripts", "More connections, secrets & API keys"] },
+  { app: "velth", items: ["Unlimited camera scans", "Smarter AI health insights"] },
+  { app: "verve", items: ["Page version history", "Higher AI rewrite & summary limits"] },
+];

package/src/controlStyles.ts

@@ -0,0 +1,360 @@
+/**
+ * Colours for `Button`, `Input`, `Textarea`, the `Select` trigger, `Switch`,
+ * `Checkbox`, `Tabs`, `Card` and component text, taken from `palette` and
+ * `tokens` instead of NativeWind theme keys (`bg-primary`, `bg-input`,
+ * `text-foreground`) that apps do not define, or define without a dark value.
+ * Also text weights and sizes as styles, the `SearchInput` metrics, the
+ * compact window test for dialogs and the touch-target maths. No React Native import, so the tests can load
+ * this file.
+ */
+import { palette, withAlpha } from "./palette";
+import { tokens } from "./tokens";
+
+type Scheme = "light" | "dark";
+
+/**
+ * `primary` and `default` are the same (`default` is the web name). `outline`
+ * is the web bordered neutral button. `tinted` is the pink tint that `outline`
+ * drew before 0.3.0.
+ */
+export type ButtonVariant =
+  | "primary"
+  | "default"
+  | "secondary"
+  | "outline"
+  | "destructive"
+  | "ghost"
+  | "link"
+  | "tinted";
+
+export type ButtonColors = {
+  backgroundColor: string;
+  borderColor: string;
+  color: string;
+};
+
+/**
+ * Fill, border and label colour per variant, from the web classes
+ * (`bg-primary text-primary-foreground`, `bg-default text-default-foreground`
+ * and so on). `null` for `tinted`, which keeps its pink NativeWind classes.
+ */
+export function buttonColors(variant: ButtonVariant, scheme: Scheme): ButtonColors | null {
+  const none = "transparent";
+  switch (variant) {
+    case "secondary":
+      return {
+        backgroundColor: palette.default[scheme],
+        borderColor: none,
+        color: palette.defaultForeground[scheme],
+      };
+    case "outline":
+      return {
+        backgroundColor: none,
+        borderColor: tokens.color.border[scheme],
+        color: tokens.color.foreground[scheme],
+      };
+    case "destructive":
+      return { backgroundColor: palette.destructive, borderColor: none, color: tokens.color.white };
+    case "ghost":
+      return { backgroundColor: none, borderColor: none, color: tokens.color.muted[scheme] };
+    case "link":
+      return { backgroundColor: none, borderColor: none, color: palette.primary[scheme] };
+    case "tinted":
+      return null;
+    default:
+      return {
+        backgroundColor: palette.primary[scheme],
+        borderColor: none,
+        color: palette.primaryForeground[scheme],
+      };
+  }
+}
+
+/**
+ * The web field look (`rounded-field border border-border bg-field-background`),
+ * radius 10 as on the web. A flat object: on web the `Select` trigger is a
+ * Radix slot, which spreads `style` and so drops arrays.
+ */
+export function fieldStyle(scheme: Scheme) {
+  return {
+    backgroundColor: tokens.color.surface[scheme],
+    borderColor: tokens.color.border[scheme],
+    borderRadius: tokens.radius.field,
+  };
+}
+
+/** Text on `fieldStyle`. From the same scheme as the fill, so the two cannot disagree. */
+export function fieldTextStyle(scheme: Scheme) {
+  return textStyle("foreground", scheme);
+}
+
+/**
+ * `foreground` and `muted` are the web `text-foreground` and
+ * `text-muted-foreground`; `overlayMuted` is the web `DialogDescription`.
+ */
+export type TextTone = "foreground" | "muted" | "overlayMuted";
+
+/**
+ * Text colour as a style. Where an app defines the NativeWind `foreground` key
+ * with a nested `dark` shade, `text-foreground` keeps the light value in dark
+ * mode, so class-coloured text was near-black on dark surfaces.
+ */
+export function textStyle(tone: TextTone, scheme: Scheme) {
+  return {
+    color: tone === "overlayMuted" ? palette.overlayMuted[scheme] : tokens.color[tone][scheme],
+  };
+}
+
+/** The web `font-medium` and `font-semibold`. */
+export type TypeWeight = "medium" | "semibold";
+
+const FONT_WEIGHT = { medium: "500", semibold: "600" } as const;
+
+/**
+ * Font weight as a style, set beside the `font-instrument-sans-*` class with
+ * the same weight. Expo web and many apps map every one of those classes to
+ * the one `Instrument Sans` family with no weight, so the class alone draws
+ * Regular. There is no `bold`: the web titles are semibold, and on Android 700
+ * can add a synthetic bold to a face that is already bold.
+ */
+export function typeStyle(weight: TypeWeight) {
+  return { fontWeight: FONT_WEIGHT[weight] };
+}
+
+/** Tailwind `text-*` sizes with their default line heights, in points. */
+const TEXT_SIZE = {
+  "text-xs": { fontSize: 12, lineHeight: 16 },
+  "text-sm": { fontSize: 14, lineHeight: 20 },
+  "text-base": { fontSize: 16, lineHeight: 24 },
+  "text-lg": { fontSize: 18, lineHeight: 28 },
+  "text-xl": { fontSize: 20, lineHeight: 28 },
+  "text-2xl": { fontSize: 24, lineHeight: 32 },
+} as const;
+
+export type TextSize = keyof typeof TEXT_SIZE;
+
+/** Tailwind `leading-tight` and `leading-snug`, as multiples of the size. */
+const LEADING = { tight: 1.25, snug: 1.375 } as const;
+
+/**
+ * Font size and line height of a `text-*` class as a style, set beside the
+ * class. On Expo web at 390 wide (0.3.6 gallery), `Button` labels with
+ * `text-sm` measured 16, so the class alone does not always reach the text.
+ * `"tight"` and `"snug"` are the Tailwind `leading-tight` (1.25 × the size)
+ * and `leading-snug` (1.375 ×).
+ */
+export function sizeStyle(size: TextSize, leading?: "tight" | "snug") {
+  const { fontSize, lineHeight } = TEXT_SIZE[size];
+  return { fontSize, lineHeight: leading ? fontSize * LEADING[leading] : lineHeight };
+}
+
+/**
+ * The web `COMPACT_OVERLAY_QUERY`, `(max-width: 639px), (max-height: 500px)`:
+ * phones, and short landscape windows such as 844 × 390.
+ */
+export const COMPACT_OVERLAY = { maxWidth: 639, maxHeight: 500 } as const;
+
+/** Whether a window of `width` × `height` points is compact: `DialogContent` is a bottom sheet there. */
+export function isCompactOverlay(width: number, height: number) {
+  return width <= COMPACT_OVERLAY.maxWidth || height <= COMPACT_OVERLAY.maxHeight;
+}
+
+/**
+ * The web `Card` root (`rounded-lg bg-surface-card`): a flat fill at radius 16,
+ * with no border and no shadow. Also `SettingsSection`. A flat object, like
+ * `fieldStyle`.
+ */
+export function cardStyle(scheme: Scheme) {
+  return {
+    backgroundColor: tokens.color.surfaceCard[scheme],
+    borderRadius: tokens.radius.lg,
+  };
+}
+
+/** The smallest touch target on a phone, in points (Apple's 44; Material asks 48). */
+export const MIN_TOUCH_TARGET = 44;
+
+/**
+ * `hitSlop` that makes a control painted `width` × `height` points reach
+ * `MIN_TOUCH_TARGET` on each axis, so it can keep the web size on screen. An
+ * axis that is already large enough gets 0.
+ */
+export function touchSlop(width: number, height: number = width) {
+  const pad = (size: number) => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - size) / 2));
+  const x = pad(width);
+  const y = pad(height);
+  return { top: y, bottom: y, left: x, right: x };
+}
+
+export type SearchInputSize = "sm" | "md";
+
+/**
+ * Field, icon and clear-button metrics for `SearchInput`, in points. Without
+ * larger text these are the web sizes (`search-input.tsx`, `clear-input.tsx`):
+ * `sm` is `h-8 pl-8 text-sm` with the icon at `left-2`, `md` is `h-10 pl-9`
+ * (the phone `text-base`) with the icon at `left-3`. Both have a 16 search
+ * icon, the field `px-3.5` at the end, and the `h-6 w-6` clear button at
+ * `right-2` with a 14 cross, for which a filled field reserves `pr-9`.
+ * `height` locks the field at the web height, border included (the web
+ * `h-8` and `h-10` are border-box), so the line height of the `text-*` class
+ * cannot grow it. `SearchInput` scales it with the system font size
+ * (`scaledFieldHeight`), so a large Dynamic Type size still grows the field.
+ * The padding leaves room for the line inside the lock: `sm` pads 4 above and
+ * below and `md` 7, not the web 8, because a native field adds its padding to
+ * the line height (8 drew `md` 42 high on Expo web). With larger text both
+ * sizes are the larger `Input` (64 high, `text-xl`), with a minimum height
+ * and no lock.
+ */
+export function searchInputSize(size: SearchInputSize, largerText: boolean) {
+  if (largerText) {
+    return {
+      minHeight: 64,
+      height: undefined,
+      paddingY: 16,
+      paddingLeft: 48,
+      paddingRight: 16,
+      filledPaddingRight: 48,
+      text: "text-xl",
+      icon: 24,
+      iconLeft: 16,
+      clear: 32,
+      clearIcon: 20,
+      clearRight: 12,
+    } as const;
+  }
+  const shared = {
+    paddingRight: 14,
+    filledPaddingRight: 36,
+    icon: 16,
+    clear: 24,
+    clearIcon: 14,
+    clearRight: 8,
+  } as const;
+  return size === "md"
+    ? { ...shared, minHeight: 40, height: 40, paddingY: 7, paddingLeft: 36, text: "text-base", iconLeft: 12 } as const
+    : { ...shared, minHeight: 32, height: 32, paddingY: 4, paddingLeft: 32, text: "text-sm", iconLeft: 8 } as const;
+}
+
+/**
+ * A locked field height at the system font scale (`useWindowDimensions().fontScale`):
+ * `height` up to a scale of 1, and `height` × the scale above it, as a web
+ * `rem` height grows with the browser text size. `undefined` (no lock) stays
+ * `undefined`.
+ */
+export function scaledFieldHeight(height: number | undefined, fontScale: number) {
+  return height === undefined ? undefined : height * Math.max(1, fontScale);
+}
+
+export type TabsVariant = "pills" | "segmented" | "soft";
+
+export type TabColors = {
+  backgroundColor: string;
+  color: string;
+};
+
+/**
+ * Fill and label colour of one tab, from the web tab variables
+ * (`tabs-pills.css`). Unselected: no fill, `--muted` label. Selected: a
+ * `--default` pill or a `--segment` segment with the `--segment-foreground`
+ * label (the neutral primary, not the accent). `soft` is the web soft trigger
+ * (`bg-surface-secondary text-foreground`). Fill and label come from one
+ * scheme, so a selected label cannot match its fill.
+ */
+export function tabColors(variant: TabsVariant, selected: boolean, scheme: Scheme): TabColors {
+  if (!selected) return { backgroundColor: "transparent", color: tokens.color.muted[scheme] };
+  switch (variant) {
+    case "segmented":
+      return { backgroundColor: palette.segment[scheme], color: palette.segmentForeground[scheme] };
+    case "soft":
+      return {
+        backgroundColor: tokens.color.surfaceSecondary[scheme],
+        color: tokens.color.foreground[scheme],
+      };
+    default:
+      return { backgroundColor: palette.default[scheme], color: palette.segmentForeground[scheme] };
+  }
+}
+
+export type TabsSize = "default" | "sm";
+
+/**
+ * Trigger box and type for `TabsTrigger` and `PillTabs`. Without larger text
+ * these are the web sizes: `pills` and `segmented` are the web `.t-tab` (30
+ * high, `px-3 py-1`, `text-sm`), `soft` the web soft trigger (`px-4 py-2
+ * text-sm`) and `sm` the web `sm` list (`px-2.5 py-1 text-xs`). With larger
+ * text they are the 0.3.4 sizes. `minHeight` is a minimum, so a large Dynamic
+ * Type size grows the trigger instead of clipping its label.
+ */
+export function tabTriggerSize(variant: TabsVariant, size: TabsSize, largerText: boolean) {
+  if (largerText) {
+    return size === "sm"
+      ? { minHeight: 48, className: "px-4 py-2", textClassName: "text-lg" }
+      : { minHeight: 56, className: "px-4 py-3", textClassName: "text-xl" };
+  }
+  if (size === "sm") return { minHeight: 30, className: "px-2.5 py-1", textClassName: "text-xs" };
+  return variant === "soft"
+    ? { minHeight: 36, className: "px-4 py-2", textClassName: "text-sm" }
+    : { minHeight: 30, className: "px-3 py-1", textClassName: "text-sm" };
+}
+
+/** The segmented track, web `--tabs-bar-bg` (`--default`). */
+export function tabTrackStyle(scheme: Scheme) {
+  return { backgroundColor: palette.default[scheme] };
+}
+
+/**
+ * Box and check colours, from the web `Checkbox` classes: `bg-field-background
+ * border-border`, and `bg-primary border-primary text-primary-foreground` when
+ * checked (also when indeterminate).
+ */
+export function checkboxColors(checked: boolean, scheme: Scheme) {
+  return checked
+    ? {
+        backgroundColor: palette.primary[scheme],
+        borderColor: palette.primary[scheme],
+        color: palette.primaryForeground[scheme],
+      }
+    : {
+        backgroundColor: tokens.color.surface[scheme],
+        borderColor: tokens.color.border[scheme],
+        color: palette.primaryForeground[scheme],
+      };
+}
+
+/**
+ * Track and thumb size classes, and the track size in points for the hit slop.
+ * Without larger text it is the web `Switch`: a `h-5 w-9` track (20 × 36,
+ * with a 1 border) and a `size-4` thumb that moves `translate-x-4`. With larger
+ * text it is the 0.3.4 size. `justify-center` on the track centres the thumb.
+ */
+export function switchSize(largerText: boolean) {
+  return largerText
+    ? { track: "h-8 w-14", thumb: "h-7 w-7", on: "translate-x-6", width: 56, height: 32 }
+    : { track: "h-5 w-9", thumb: "h-4 w-4", on: "translate-x-4", width: 36, height: 20 };
+}
+
+/**
+ * Track and thumb colours, from the web `Switch` classes. The light off thumb
+ * is white (web `bg-background`) so it shows on the grey track. Flat objects,
+ * for the same reason as `fieldStyle`.
+ */
+export function switchColors(checked: boolean, scheme: Scheme) {
+  if (checked) {
+    return {
+      track: { backgroundColor: palette.primary[scheme], borderColor: palette.primary[scheme] },
+      thumb: { backgroundColor: palette.primaryForeground[scheme] },
+    };
+  }
+  return scheme === "dark"
+    ? {
+        track: {
+          backgroundColor: withAlpha(tokens.color.muted.dark, 0.4),
+          borderColor: withAlpha(tokens.color.muted.dark, 0.6),
+        },
+        thumb: { backgroundColor: tokens.color.foreground.dark },
+      }
+    : {
+        track: { backgroundColor: palette.default.light, borderColor: tokens.color.border.light },
+        thumb: { backgroundColor: tokens.color.surface.light },
+      };
+}

package/src/dialogLayout.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+
+/**
+ * Where a `Button` sits in a dialog. The web sizes buttons in the compact
+ * dialog with descendant selectors, which React Native lacks, so `DialogContent`
+ * and `DialogFooter` pass this down instead. `compact`: inside the phone bottom
+ * sheet, where buttons are at least 44 high (web `[&_button]:min-h-11`).
+ * `stacked`: inside its footer too, where buttons fill the width (web
+ * `flex-col-reverse`).
+ */
+export type DialogLayout = { compact: boolean; stacked: boolean };
+
+export const DialogLayoutContext = createContext<DialogLayout>({
+  compact: false,
+  stacked: false,
+});
+
+export function useDialogLayout(): DialogLayout {
+  return useContext(DialogLayoutContext);
+}

package/src/entries/ambient.ts

@@ -0,0 +1,3 @@
+// `@vvedantb/native-ui/ambient`. Loads `expo-linear-gradient` only through its
+// optional-peer loader; without it the background is solid.
+export { AmbientBackground } from "../AmbientBackground";

package/src/entries/bottom-sheet.ts

@@ -0,0 +1,2 @@
+// `@vvedantb/native-ui/bottom-sheet`. Imports `@gorhom/bottom-sheet`.
+export { BottomSheetContainer } from "../BottomSheetContainer";

package/src/entries/brand.ts

@@ -0,0 +1,2 @@
+// `@vvedantb/native-ui/brand`: the family app marks and their pure data.
+export * from "../brand";

package/src/entries/button.ts

@@ -0,0 +1,3 @@
+// `@vvedantb/native-ui/button`.
+export { Button } from "../Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "../Button";