@vvedantb/native-ui 0.2.1 → 0.3.12

package/src/Textarea.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Input as PrimitiveInput } from "./primitives/input";
+import { cn } from "./cn";
+import { fieldStyle, fieldTextStyle, typeStyle } from "./controlStyles";
+import { palette } from "./palette";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+type TextareaProps = React.ComponentPropsWithoutRef<typeof PrimitiveInput> & {
+  className?: string;
+};
+
+/** Multiline `Input`: same fill, border, radius and type. Grows from 4 lines. */
+const Textarea = React.forwardRef<
+  React.ElementRef<typeof PrimitiveInput>,
+  TextareaProps
+>(({ className, placeholderTextColor, numberOfLines = 4, style, ...props }, ref) => {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  return (
+    <PrimitiveInput
+      ref={ref}
+      multiline
+      numberOfLines={numberOfLines}
+      textAlignVertical="top"
+      placeholderTextColor={placeholderTextColor ?? palette.fieldPlaceholder[scheme]}
+      className={cn(
+        // The web textarea: min-h-20 px-3.5 py-2.5, 16 px type.
+        "min-h-20 border px-3.5 py-2.5 text-base font-instrument-sans",
+        largerText && "min-h-32 px-4 py-3 text-xl font-instrument-sans-medium",
+        className,
+      )}
+      style={[
+        fieldStyle(scheme),
+        fieldTextStyle(scheme),
+        largerText ? typeStyle("medium") : null,
+        style,
+      ]}
+      {...props}
+    />
+  );
+});
+
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+export type { TextareaProps };

package/src/Toast.tsx

@@ -0,0 +1,170 @@
+import { Fragment, useEffect, useSyncExternalStore } from "react";
+import {
+  AccessibilityInfo,
+  ActivityIndicator,
+  Platform,
+  Pressable,
+  Text,
+  View,
+} from "react-native";
+import { FadeInUp, FadeOutUp, LinearTransition } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import Svg, { Path } from "react-native-svg";
+import { cn } from "./cn";
+import { sizeStyle, textStyle, typeStyle } from "./controlStyles";
+import { FLOATING_INSET } from "./floating";
+import {
+  TOAST_ICON_SIZE,
+  TOAST_ICONS,
+  toastIconColor,
+  toastShadowStyle,
+  toastSurfaceStyle,
+} from "./toastChrome";
+import { tokens } from "./tokens";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+import { NativeOnlyAnimatedView } from "./primitives/native-only-animated-view";
+import { getToasts, subscribeToasts, toast, type ToastItem } from "./toastStore";
+
+// On iOS the overlay draws above RN `Modal`s, so toasts show over dialogs (as
+// sonner does on the web). On Android a `Modal` still covers them.
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : Fragment;
+
+const toastShadow = toastShadowStyle(Platform.OS);
+
+/**
+ * Renders the `toast()` queue at the top of the screen, inside the safe-area
+ * insets. Mount once, inside `SafeAreaProvider` and after the navigator.
+ */
+export function Toaster({ offset = 8 }: { offset?: number }) {
+  const items = useSyncExternalStore(subscribeToasts, getToasts, getToasts);
+  const insets = useSafeAreaInsets();
+  if (items.length === 0) return null;
+  return (
+    <FullWindowOverlay>
+      <View
+        pointerEvents="box-none"
+        className="gap-2"
+        style={{
+          position: "absolute",
+          top: insets.top + offset,
+          left: insets.left + FLOATING_INSET,
+          right: insets.right + FLOATING_INSET,
+          zIndex: 50,
+        }}
+      >
+        {items.map((item) => (
+          <ToastCard key={item.id} item={item} />
+        ))}
+      </View>
+    </FullWindowOverlay>
+  );
+}
+
+/** The web filled 24 icons (`toastChrome`), or a spinner while loading. */
+function ToastIcon({ item }: { item: ToastItem }) {
+  const scheme = useScheme();
+  if (item.variant === "loading") {
+    return <ActivityIndicator size="small" color={tokens.color.muted[scheme]} />;
+  }
+  if (item.variant === "default") return null;
+  const { viewBox, d, evenOdd } = TOAST_ICONS[item.variant];
+  const rule = evenOdd ? "evenodd" : undefined;
+  return (
+    <Svg width={TOAST_ICON_SIZE} height={TOAST_ICON_SIZE} viewBox={viewBox}>
+      <Path
+        d={d}
+        fill={toastIconColor(item.variant, scheme)}
+        fillRule={rule}
+        clipRule={rule}
+      />
+    </Svg>
+  );
+}
+
+function ToastCard({ item }: { item: ToastItem }) {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+
+  useEffect(() => {
+    if (!Number.isFinite(item.duration)) return;
+    const timer = setTimeout(() => toast.dismiss(item.id), item.duration);
+    return () => clearTimeout(timer);
+  }, [item]);
+
+  useEffect(() => {
+    AccessibilityInfo.announceForAccessibility(
+      item.description ? `${item.title}. ${item.description}` : item.title,
+    );
+  }, [item.title, item.description]);
+
+  return (
+    <NativeOnlyAnimatedView
+      entering={FadeInUp.duration(200)}
+      exiting={FadeOutUp.duration(160)}
+      layout={LinearTransition}
+    >
+      {/* The web toast: flat overlay fill, radius 16, ring and a light shadow. */}
+      <View style={[toastSurfaceStyle(scheme), toastShadow]}>
+        <Pressable
+          testID={`toast-${item.id}`}
+          // With an action, the text and the action button stay separate
+          // elements for VoiceOver and TalkBack instead of one grouped button.
+          accessible={!item.action}
+          accessibilityRole="button"
+          accessibilityHint="Closes the message"
+          onPress={() => toast.dismiss(item.id)}
+          className="flex-row items-center gap-3 px-4 py-3"
+        >
+          <ToastIcon item={item} />
+          <View className="min-w-0 flex-1">
+            {/* Web `text-sm font-medium leading-snug` (14 / 19.25, 500); `text-lg` with larger text. */}
+            <Text
+              className={cn(
+                "font-instrument-sans-medium",
+                largerText ? "text-lg" : "text-sm",
+              )}
+              style={[
+                textStyle("foreground", scheme),
+                typeStyle("medium"),
+                largerText ? sizeStyle("text-lg") : sizeStyle("text-sm", "snug"),
+              ]}
+            >
+              {item.title}
+            </Text>
+            {item.description ? (
+              <Text
+                className={cn(
+                  "font-instrument-sans",
+                  largerText ? "text-base" : "text-sm",
+                )}
+                style={textStyle("muted", scheme)}
+              >
+                {item.description}
+              </Text>
+            ) : null}
+          </View>
+          {item.action ? (
+            <Pressable
+              accessibilityRole="button"
+              hitSlop={8}
+              onPress={() => {
+                item.action?.onPress();
+                toast.dismiss(item.id);
+              }}
+              className="rounded-full bg-secondary px-3 py-1.5 active:opacity-70"
+            >
+              <Text
+                className="font-instrument-sans-semibold text-sm"
+                style={[textStyle("foreground", scheme), typeStyle("semibold")]}
+              >
+                {item.action.label}
+              </Text>
+            </Pressable>
+          ) : null}
+        </Pressable>
+      </View>
+    </NativeOnlyAnimatedView>
+  );
+}

package/src/blur.ts

@@ -0,0 +1,48 @@
+import type * as ExpoBlur from "expo-blur";
+
+export type ExpoBlurModule = typeof ExpoBlur;
+
+let expoBlur: ExpoBlurModule | null | undefined;
+
+/**
+ * `expo-blur`, or `null` when the optional peer is not installed. Metro
+ * bundles a `require` placed directly in a `try` block as an optional
+ * dependency, so a missing peer does not break the bundle.
+ */
+export function loadBlur(): ExpoBlurModule | null {
+  if (expoBlur === undefined) {
+    try {
+      expoBlur = require("expo-blur") as ExpoBlurModule;
+    } catch {
+      expoBlur = null;
+    }
+  }
+  return expoBlur;
+}
+
+export type GlassMode = "blur" | "backdrop" | "solid";
+
+/**
+ * How a floating surface draws its glass: a native `BlurView` on iOS and
+ * Android, a CSS backdrop blur on web, or the solid fill when blur is off,
+ * Reduce Transparency is on or `expo-blur` is missing.
+ */
+export function glassMode({
+  os,
+  blur,
+  reduceTransparency,
+  hasBlurView,
+}: {
+  os: string;
+  blur: boolean;
+  reduceTransparency: boolean;
+  hasBlurView: boolean;
+}): GlassMode {
+  if (!blur || reduceTransparency) {
+    return "solid";
+  }
+  if (os === "web") {
+    return "backdrop";
+  }
+  return (os === "ios" || os === "android") && hasBlurView ? "blur" : "solid";
+}

package/src/brand/AppIcons.tsx

@@ -0,0 +1,106 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import Svg, { G, Path } from "react-native-svg";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import {
+  APP_MARKS,
+  APP_MARK_VIEWBOX,
+  APP_MARK_VIEWBOX_START,
+  APP_NAMES,
+  markLinecap,
+  markStrokeWidth,
+  type AppName,
+} from "./svg";
+
+export type AppIconProps = {
+  /** Rendered width and height in points (the glyph is square). Default 24. */
+  size?: number;
+  /** Glyph colour, for fill and stroke glyphs. Default the scheme's `tokens.color.foreground`. */
+  color?: string;
+  /** Stroke width in rendered points, for stroke glyphs. Default: the glyph's own weight. Fill glyphs ignore it. */
+  stroke?: number;
+  /** Accessible name. Without it the icon is hidden from assistive tech. */
+  title?: string;
+  /** `"center"` (default) centres the glyph in its square. `"start"` left-aligns its ink, for vertical lists. */
+  align?: "center" | "start";
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+export type AppIconComponent = ((props: AppIconProps) => React.JSX.Element) & {
+  displayName?: string;
+};
+
+function viewBoxSide(app: AppName): number {
+  return Number(APP_MARK_VIEWBOX[app].split(" ")[3]);
+}
+
+function createAppIcon(app: AppName, displayName: string): AppIconComponent {
+  function Icon({
+    size = 24,
+    color,
+    stroke,
+    title,
+    align = "center",
+    testID,
+    style,
+  }: AppIconProps) {
+    const scheme = useScheme();
+    const fill = color ?? tokens.color.foreground[scheme];
+    const { kind, paths } = APP_MARKS[app];
+    const strokeWidth =
+      stroke === undefined
+        ? markStrokeWidth(app)
+        : stroke * (viewBoxSide(app) / size);
+    const glyphProps =
+      kind === "fill"
+        ? { fill }
+        : {
+            fill: "none",
+            stroke: fill,
+            strokeWidth,
+            strokeLinecap: markLinecap(app),
+            strokeLinejoin: "round" as const,
+          };
+    return (
+      <Svg
+        width={size}
+        height={size}
+        viewBox={
+          align === "start" ? APP_MARK_VIEWBOX_START[app] : APP_MARK_VIEWBOX[app]
+        }
+        preserveAspectRatio="xMidYMid meet"
+        accessible={Boolean(title)}
+        accessibilityRole={title ? "image" : undefined}
+        accessibilityLabel={title}
+        accessibilityElementsHidden={!title}
+        importantForAccessibility={title ? "auto" : "no-hide-descendants"}
+        testID={testID}
+        style={style}
+      >
+        <G {...glyphProps}>
+          {paths.map((d) => (
+            <Path key={d} d={d} />
+          ))}
+        </G>
+      </Svg>
+    );
+  }
+  Icon.displayName = displayName;
+  return Icon;
+}
+
+const iconName = (app: AppName) =>
+  `Icon${app === "projectv" ? "ProjectV" : app[0]!.toUpperCase() + app.slice(1)}`;
+
+/** Plain app glyph components by app name, for dynamic lookup. Same paths and viewBoxes as the web `APP_ICONS`. */
+export const APP_ICONS = Object.fromEntries(
+  APP_NAMES.map((app) => [app, createAppIcon(app, iconName(app))]),
+) as Record<AppName, AppIconComponent>;
+
+export const IconVibot = APP_ICONS.vibot;
+export const IconVhub = APP_ICONS.vhub;
+export const IconVmem = APP_ICONS.vmem;
+export const IconVerve = APP_ICONS.verve;
+export const IconVelth = APP_ICONS.velth;
+export const IconProjectV = APP_ICONS.projectv;

package/src/brand/AppMark.tsx

@@ -0,0 +1,83 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import Svg, { G, Path, Rect } from "react-native-svg";
+import { APP_ICONS } from "./AppIcons";
+import {
+  APP_MARKS,
+  MARK_VIEWBOX,
+  TILE_RADIUS,
+  markLinecap,
+  markStrokeWidth,
+  type AppMarkVariant,
+  type AppName,
+} from "./svg";
+
+export type AppMarkProps = {
+  /** Which family app's mark to draw. */
+  app: AppName;
+  /** `"mark"` (default): the plain `APP_ICONS` glyph. `"tile"`: white glyph on a black rounded tile. `"tile-light"`: black glyph on a white tile. */
+  variant?: AppMarkVariant;
+  /** Width and height in points. Default 24. */
+  size?: number;
+  /** Accessible name. Without it the mark is hidden from assistive tech. */
+  title?: string;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+const TILE_TONES = {
+  tile: { bg: "#000", fg: "#fff" },
+  "tile-light": { bg: "#fff", fg: "#000" },
+} as const;
+
+/**
+ * One of the six family app marks, as on the web `AppMark`. Tiles share the
+ * 1024 grid with the plain mark, so a bare glyph matches the tile glyph.
+ * Prefer `APP_ICONS[app]` for plain marks; tiles are for app icons only.
+ */
+export function AppMark({
+  app,
+  variant = "mark",
+  size = 24,
+  title,
+  testID,
+  style,
+}: AppMarkProps) {
+  if (variant === "mark") {
+    const Icon = APP_ICONS[app];
+    return <Icon size={size} title={title} testID={testID} style={style} />;
+  }
+  const { kind, paths } = APP_MARKS[app];
+  const tone = TILE_TONES[variant];
+  const glyphProps =
+    kind === "fill"
+      ? { fill: tone.fg }
+      : {
+          fill: "none",
+          stroke: tone.fg,
+          strokeWidth: markStrokeWidth(app),
+          strokeLinecap: markLinecap(app),
+          strokeLinejoin: "round" as const,
+        };
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={MARK_VIEWBOX}
+      preserveAspectRatio="xMidYMid meet"
+      accessible={Boolean(title)}
+      accessibilityRole={title ? "image" : undefined}
+      accessibilityLabel={title}
+      accessibilityElementsHidden={!title}
+      importantForAccessibility={title ? "auto" : "no-hide-descendants"}
+      testID={testID}
+      style={style}
+    >
+      <Rect width={1024} height={1024} rx={TILE_RADIUS} fill={tone.bg} />
+      <G {...glyphProps}>
+        {paths.map((d) => (
+          <Path key={d} d={d} />
+        ))}
+      </G>
+    </Svg>
+  );
+}

package/src/brand/AppWordmark.tsx

@@ -0,0 +1,97 @@
+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";
+import type { AppName } from "./svg";
+
+/** The five product apps. `projectv` keeps its Michroma wordmark and never uses `AppWordmark`. */
+export type ProductAppName = Exclude<AppName, "projectv">;
+
+export type AppWordmarkProps = {
+  /** Which product app's name to show. The label is always the lowercase app id. */
+  app: ProductAppName;
+  /** Text font size in points (default 24). The icon is `Math.round(size * 1.4)` square and the gap is `0.2em`. */
+  size?: number;
+  /** `false` renders the name only (default `true`). */
+  icon?: boolean;
+  /** Icon and text colour. Default the scheme's `tokens.color.foreground`. */
+  color?: string;
+  /** When set, the wordmark is a pressable link (the web `href`). */
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  className?: string;
+  testID?: string;
+};
+
+/**
+ * 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({
+  app,
+  size = 24,
+  icon = true,
+  color,
+  onPress,
+  accessibilityLabel,
+  className,
+  testID,
+}: AppWordmarkProps) {
+  const scheme = useScheme();
+  const Icon = APP_ICONS[app];
+  const fg = color ?? tokens.color.foreground[scheme];
+  const content = (
+    <>
+      {icon ? (
+        <Icon size={Math.round(size * WORDMARK.iconScale)} color={fg} />
+      ) : null}
+      <Text
+        className={WORDMARK.fontClass}
+        style={{
+          fontSize: size,
+          lineHeight: size,
+          letterSpacing: size * WORDMARK.letterSpacingEm,
+          // The class alone draws Regular where an app maps every Instrument
+          // Sans class to one family.
+          fontWeight: WORDMARK.fontWeight,
+          color: fg,
+          includeFontPadding: false,
+        }}
+      >
+        {app}
+      </Text>
+    </>
+  );
+  const rowClassName = cn("flex-row items-center", className);
+  const rowStyle = { gap: size * WORDMARK.gapEm };
+
+  if (onPress) {
+    return (
+      <Pressable
+        testID={testID}
+        accessibilityRole="link"
+        accessibilityLabel={accessibilityLabel ?? app}
+        onPress={onPress}
+        className={cn(rowClassName, "active:opacity-70")}
+        style={rowStyle}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+  return (
+    <View
+      testID={testID}
+      accessible
+      accessibilityLabel={accessibilityLabel ?? app}
+      className={rowClassName}
+      style={rowStyle}
+    >
+      {content}
+    </View>
+  );
+}
+AppWordmark.displayName = "AppWordmark";

package/src/brand/familyApps.ts

@@ -0,0 +1,24 @@
+import type { AppName } from "./svg";
+
+export type FamilyApp = {
+  app: AppName;
+  /** Display name. */
+  name: string;
+  /** Home page of the app. */
+  url: string;
+};
+
+/** Single source for family app display names and sites, in display order. */
+export const FAMILY_APPS: readonly FamilyApp[] = [
+  { 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: AppName): FamilyApp {
+  return FAMILY_APPS.find((entry) => entry.app === app)!;
+}

package/src/brand/index.ts

@@ -0,0 +1,34 @@
+// `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, IconProjectV, IconVelth, IconVerve, IconVhub, IconVibot, IconVmem } from "./AppIcons";
+export type { AppIconComponent, AppIconProps } from "./AppIcons";
+export { AppMark } from "./AppMark";
+export type { AppMarkProps } from "./AppMark";
+export { AppWordmark } from "./AppWordmark";
+export type { AppWordmarkProps, ProductAppName } from "./AppWordmark";
+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 type { AppMarkVariant, AppName, MarkShape } from "./svg";
+export { FAMILY_APPS, familyApp } from "./familyApps";
+export type { FamilyApp } from "./familyApps";
+export { V_PRO_APP_BENEFITS } from "./vProAppBenefits";
+export type { PricingPlanAppBenefit } from "./vProAppBenefits";