@vvedantb/native-ui 0.3.13 → 0.3.15

package/README.md

@@ -23,7 +23,7 @@ Optional, only if you import those components:
 
 - `@gorhom/bottom-sheet` — `BottomSheetContainer`
 - `@react-native-community/datetimepicker` and `dayjs` — `DateTimeField`
-- `react-native-svg` — the app marks (`APP_ICONS`, `Icon*`, `AppMark`, `AppWordmark`) and `PricingModal`. Apps with the icon peers above already have it: `lucide-react-native` and `@tabler/icons-react-native` both require it.
+- `react-native-svg` — the app marks (`APP_ICONS`, `Icon*`, `AppMark`, `AppWordmark`), `GoogleMark` and `PricingModal`. Apps with the icon peers above already have it: `lucide-react-native` and `@tabler/icons-react-native` both require it.
 
 Optional and loaded only when installed, so the package imports and runs without them:
 
@@ -57,7 +57,7 @@ The root entry exports everything. It still imports `BottomSheetContainer` and `
 | Entry | Exports | Optional peers it reaches |
 | --- | --- | --- |
 | `@vvedantb/native-ui/tab-bar` | `FloatingTabBar`, `FloatingTabBarProps`, `FLOATING_INSET`, `FLOATING_TAB_BAR_HEIGHT`, `FLOATING_TAB_BAR_HEIGHT_LARGE`, `tabBarReserve` | `expo-blur`, `expo-haptics` (loaders) |
-| `@vvedantb/native-ui/brand` | `AppMark`, `AppWordmark`, `APP_ICONS`, `IconVibot` and the other `Icon*`, the SVG helpers (`APP_MARKS`, `appMarkSvg`, `appTileSvg` and the rest), `FAMILY_APPS`, `familyApp`, `V_PRO_APP_BENEFITS` | none |
+| `@vvedantb/native-ui/brand` | `AppMark`, `AppWordmark`, `GoogleMark` (from 0.3.15), `APP_ICONS`, `IconVibot` and the other `Icon*`, the SVG helpers (`APP_MARKS`, `appMarkSvg`, `appTileSvg` and the rest), `FAMILY_APPS`, `familyApp`, `V_PRO_APP_BENEFITS` | none |
 | `@vvedantb/native-ui/button` | `Button`, `ButtonProps`, `ButtonSize`, `ButtonVariant` | none |
 | `@vvedantb/native-ui/primitives` | `Button`, `Input`, `SearchInput`, `Textarea`, `Label`, `Select`, `Switch`, `LabeledSwitchRow`, `Checkbox`, `Card` and its parts, `Badge`, `StatusDot`, `Avatar`, `Separator`, `Progress`, `Spinner`, `Skeleton`, `EmptyState`, `ListRow`, `Chip`, `HeaderIconButton`, `Tabs`, `PillTabs`, `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet`, `toast`, `Toaster` | `expo-blur`, `expo-haptics` (loaders) |
 | `@vvedantb/native-ui/search-input` | `SearchInput`, `SearchInputProps` | none |
@@ -138,7 +138,7 @@ import { NativeUiProvider, Button, Card } from "@vvedantb/native-ui";
 | Navigation | `Tabs` (+ `TabsList`, `TabsTrigger`, `TabsContent`), `PillTabs`, `FloatingTabBar`, `FloatingFAB`, `HeaderIconButton` |
 | Overlays | `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet` (RN `Modal`, each with the web part names), `BottomSheetContainer` (`@gorhom/bottom-sheet`) |
 | Feedback | `toast()` and `<Toaster />` |
-| Brand and upgrade | `APP_ICONS`, `IconVibot` and the other `Icon*`, `AppMark`, `AppWordmark`, `FAMILY_APPS`, `V_PRO_APP_BENEFITS`, `UpgradeToProCard`, `PricingModal` |
+| Brand and upgrade | `APP_ICONS`, `IconVibot` and the other `Icon*`, `AppMark`, `AppWordmark`, `GoogleMark` (0.3.15), `FAMILY_APPS`, `V_PRO_APP_BENEFITS`, `UpgradeToProCard`, `PricingModal` |
 | Settings and layout | `PageTitle`, `PageHeader` (0.3.13), `SettingsSection`, `SettingsField`, `SettingsToggleRow`, `SettingsStack`, `ScreenContainer`, `SafeAreaContainer`, `FloatingSurface`, `AmbientBackground` |
 
 Overlays hold their own open state, or take `open` and `onOpenChange`:
@@ -197,6 +197,10 @@ The components keep the web sizes on screen and reach a 44 pt touch target with
 
 Text scales with the system font size. Labelled controls have minimum heights, so a large Dynamic Type size grows them instead of clipping the label (the `SearchInput` lock grows with the font scale); only the `FloatingTabBar` labels are capped (1.5×), to fit the fixed bar. With Reduce Motion on, dialogs, sheets, toasts, the `Select` popover, `PricingModal`, `Progress` and `Skeleton` do not animate. Dialogs, sheets, toasts, `FloatingTabBar` and `FloatingFAB` stay inside the safe-area insets, and dialog and sheet fields stay above the keyboard on iOS and Android.
 
+The brand marks (`APP_ICONS`, the `Icon*` exports, `AppMark` and `GoogleMark`) are images named by `title`, and hidden from assistive tech without one. From 0.3.14 they set the props each platform reads: `accessibilityRole="image"` and `accessibilityLabel` on iOS and Android, `role="img"` and `aria-label` on web. Without a title they set `accessibilityElementsHidden` and `importantForAccessibility="no-hide-descendants"` on native and `aria-hidden` on web. `testID` is `data-testid` on web. On web `react-native-svg` passes its props straight to the DOM `<svg>`, and React Native Web does not map `accessible`, the `accessibility*` props or `testID` there. So do not put them on an `Svg` or on a Tabler icon: put them on the parent `View` or `Pressable`. The package draws no Lucide icon, as a Lucide icon always sets `testID` on its `Svg`. On web the `Select` options are Radix DOM nodes, so from 0.3.14 they take their name and test id as `aria-label` and `data-testid` there, and as `accessibilityLabel` and `testID` on iOS and Android.
+
+`GoogleMark` (from 0.3.15) is the four-colour Google "G", 18 by default, for a "Continue with Google" button: `<Button variant="outline" leftIcon={<GoogleMark />}>Continue with Google</Button>`. Its colours are fixed, so it takes no `color`. Leave it without a `title` there, as the label names the button.
+
 ## Floating UI / Android shadows
 
 Do not put `elevation` or NativeWind `shadow-*` on nested or translucent chrome. `floatingShadow` is iOS `shadow*` and Android/web `boxShadow`. `FloatingSurface` clips on an inner view.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.3.13",
+  "version": "0.3.15",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar and the family app marks.",
   "type": "module",

package/src/Select.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Platform } from "react-native";
 import {
   NativeSelectScrollView,
   Select as PrimitiveSelect,
@@ -17,6 +18,7 @@ import {
   typeStyle,
 } from "./controlStyles";
 import { palette } from "./palette";
+import { selectItemA11yProps } from "./selectA11y";
 import { useLargerText } from "./theme";
 import { useScheme } from "./useScheme";
 
@@ -138,10 +140,11 @@ function Select<TValue = string | number | null>({
                 ? `${testID}-${String(option.value ?? "null")}`
                 : undefined;
               return (
+                // On web the item is a Radix DOM node: the name and test id
+                // go as `aria-label` and `data-testid` there.
                 <SelectItem
                   key={`${String(option.value)}-${option.label}`}
-                  testID={optionId}
-                  accessibilityLabel={option.label}
+                  {...selectItemA11yProps({ label: option.label, testID: optionId }, Platform.OS)}
                   label={option.label}
                   value={String(option.value ?? NULL_SENTINEL)}
                 />

package/src/brand/AppIcons.tsx

@@ -1,5 +1,6 @@
-import type { StyleProp, ViewStyle } from "react-native";
+import { Platform, type StyleProp, type ViewStyle } from "react-native";
 import Svg, { G, Path } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
 import {
@@ -19,10 +20,11 @@ export type AppIconProps = {
   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. */
+  /** Accessible name. Without it the icon is hidden from assistive tech. On web: `role="img"` and `aria-label`, or `aria-hidden`. */
   title?: string;
   /** `"center"` (default) centres the glyph in its square. `"start"` left-aligns its ink, for vertical lists. */
   align?: "center" | "start";
+  /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
   testID?: string;
   style?: StyleProp<ViewStyle>;
 };
@@ -70,12 +72,7 @@ function createAppIcon(app: AppName, displayName: string): AppIconComponent {
           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}
+        {...svgA11yProps({ title, testID }, Platform.OS)}
         style={style}
       >
         <G {...glyphProps}>

package/src/brand/AppMark.tsx

@@ -1,5 +1,6 @@
-import type { StyleProp, ViewStyle } from "react-native";
+import { Platform, type StyleProp, type ViewStyle } from "react-native";
 import Svg, { G, Path, Rect } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
 import { APP_ICONS } from "./AppIcons";
 import {
   APP_MARKS,
@@ -18,8 +19,9 @@ export type AppMarkProps = {
   variant?: AppMarkVariant;
   /** Width and height in points. Default 24. */
   size?: number;
-  /** Accessible name. Without it the mark is hidden from assistive tech. */
+  /** Accessible name. Without it the mark is hidden from assistive tech. On web: `role="img"` and `aria-label`, or `aria-hidden`. */
   title?: string;
+  /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
   testID?: string;
   style?: StyleProp<ViewStyle>;
 };
@@ -64,12 +66,7 @@ export function AppMark({
       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}
+      {...svgA11yProps({ title, testID }, Platform.OS)}
       style={style}
     >
       <Rect width={1024} height={1024} rx={TILE_RADIUS} fill={tone.bg} />

package/src/brand/GoogleMark.tsx

@@ -0,0 +1,55 @@
+import { Platform, type StyleProp, type ViewStyle } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
+
+export type GoogleMarkProps = {
+  /** Width and height in points. Default 18. */
+  size?: number;
+  /** Accessible name. Without it the mark is hidden from assistive tech, as it should be beside a "Continue with Google" label. On web: `role="img"` and `aria-label`, or `aria-hidden`. */
+  title?: string;
+  /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** 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",
+  },
+] as const;
+
+/**
+ * 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({ size = 18, title, testID, style }: GoogleMarkProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      preserveAspectRatio="xMidYMid meet"
+      {...svgA11yProps({ title, testID }, Platform.OS)}
+      style={style}
+    >
+      {GOOGLE_G.map(({ fill, d }) => (
+        <Path key={fill} d={d} fill={fill} />
+      ))}
+    </Svg>
+  );
+}

package/src/brand/index.ts

@@ -7,6 +7,8 @@ export { AppMark } from "./AppMark";
 export type { AppMarkProps } from "./AppMark";
 export { AppWordmark } from "./AppWordmark";
 export type { AppWordmarkProps, ProductAppName } from "./AppWordmark";
+export { GoogleMark } from "./GoogleMark";
+export type { GoogleMarkProps } from "./GoogleMark";
 export {
   APP_MARKS,
   APP_MARK_CROP_VIEWBOX,

package/src/entries/brand.ts

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

package/src/examples/ParityGallery.tsx

@@ -43,6 +43,7 @@ import {
   DialogTitle,
   DialogTrigger,
   EmptyState,
+  GoogleMark,
   Input,
   Label,
   LabeledSwitchRow,
@@ -215,7 +216,11 @@ function GalleryScreen() {
             })}
             <AppMark app="vibot" variant="tile" size={40} />
             <AppMark app="vibot" variant="tile-light" size={40} />
+            <GoogleMark size={28} />
           </View>
+          <Button variant="outline" leftIcon={<GoogleMark />} onPress={() => toast("Continue with Google")}>
+            Continue with Google
+          </Button>
         </Section>
 
         <Section title="Button">

package/src/index.ts

@@ -144,7 +144,7 @@ export { SettingsField } from "./settings/SettingsField";
 export { SettingsToggleRow } from "./settings/SettingsToggleRow";
 export { SettingsStack } from "./settings/SettingsStack";
 export { PINK_50, PINK_100, PINK_600, PINK_700, NEUTRAL_100, NEUTRAL_500, NEUTRAL_900, Colors } from "./colors";
-// Family app marks and their pure data (copied from `@vvedantb/ui/brand`).
+// Family app marks and their pure data (copied from `@vvedantb/ui/brand`), and `GoogleMark`.
 export * from "./brand";
 export { UpgradeToProCard } from "./marketing/UpgradeToProCard";
 export type { UpgradeToProCardProps } from "./marketing/UpgradeToProCard";

package/src/primitives/icon.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import type { LucideIcon, LucideProps } from "lucide-react-native";
+import type { IconProps as TablerIconProps } from "@tabler/icons-react-native";
 
-type IconProps = LucideProps & {
-  as: LucideIcon;
+// Tabler, not Lucide: a Lucide icon always sets `testID` on its `Svg`, which
+// on web is a DOM `<svg>`, so React logs it as an unknown DOM prop.
+type IconProps = TablerIconProps & {
+  as: React.ComponentType<TablerIconProps>;
   className?: string;
 };
 

package/src/primitives/select.tsx

@@ -1,10 +1,7 @@
 import * as SelectPrimitive from "@rn-primitives/select";
-import {
-  Check,
-  ChevronDown,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from "lucide-react-native";
+// Tabler, not Lucide: a Lucide icon always sets `testID` on its `Svg`, which
+// on web is a DOM `<svg>`, so React logs it as an unknown DOM prop.
+import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react-native";
 import * as React from "react";
 import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
 import { FadeIn, FadeOut } from "react-native-reanimated";
@@ -72,7 +69,7 @@ const SelectTrigger = React.forwardRef<
       {...props}
     >
       <>{children}</>
-      <ChevronDown size={16} color={tokens.color.muted[scheme]} />
+      <IconChevronDown size={16} color={tokens.color.muted[scheme]} />
     </SelectPrimitive.Trigger>
   );
 });
@@ -153,6 +150,11 @@ const SelectLabel = React.forwardRef<
   );
 });
 
+/**
+ * On web `SelectPrimitive.Item` passes these props to a Radix DOM node, not a
+ * React Native view, so give it `aria-label` and `data-testid` there, not
+ * `accessibilityLabel` or `testID` (`selectItemA11yProps`).
+ */
 type SelectItemProps = React.ComponentPropsWithoutRef<
   typeof SelectPrimitive.Item
 > & {
@@ -177,7 +179,7 @@ const SelectItem = React.forwardRef<
     >
       <View className="absolute right-2 size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <Check size={16} color={tokens.color.muted[scheme]} />
+          <IconCheck size={16} color={tokens.color.muted[scheme]} />
         </SelectPrimitive.ItemIndicator>
       </View>
       <SelectPrimitive.ItemText
@@ -220,7 +222,7 @@ function SelectScrollUpButton(
       className="items-center justify-center py-1"
       {...props}
     >
-      <ChevronUpIcon size={16} color="#737373" />
+      <IconChevronUp size={16} color="#737373" />
     </SelectPrimitive.ScrollUpButton>
   );
 }
@@ -239,7 +241,7 @@ function SelectScrollDownButton(
       className="items-center justify-center py-1"
       {...props}
     >
-      <ChevronDownIcon size={16} color="#737373" />
+      <IconChevronDown size={16} color="#737373" />
     </SelectPrimitive.ScrollDownButton>
   );
 }

package/src/selectA11y.ts

@@ -0,0 +1,26 @@
+/**
+ * Accessibility and test props for a `Select` option. On web
+ * `@rn-primitives/select` passes the props of its `Item` through a `Slot` to
+ * the Radix `Select.Item`, a DOM `<div>`. React Native Web never sees them, so
+ * React logs `accessibilityLabel` and `testID` there as unknown DOM props. Web
+ * gets `aria-label` and `data-testid`; iOS and Android keep the native props.
+ * No React Native import, so the tests can load this file.
+ */
+
+export type SelectItemA11yProps =
+  | { "aria-label": string; "data-testid"?: string }
+  | { accessibilityLabel: string; testID?: string };
+
+/**
+ * Spread on the `SelectItem`. Pass `Platform.OS` as `os`. Without `testID` the
+ * result has no test id key, not one set to `undefined`.
+ */
+export function selectItemA11yProps(
+  { label, testID }: { label: string; testID?: string },
+  os: string,
+): SelectItemA11yProps {
+  if (os === "web") {
+    return testID === undefined ? { "aria-label": label } : { "aria-label": label, "data-testid": testID };
+  }
+  return testID === undefined ? { accessibilityLabel: label } : { accessibilityLabel: label, testID };
+}

package/src/svgA11y.ts

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+
+export type SvgA11yProps =
+  | { role: "img"; "aria-label": string; "data-testid"?: string }
+  | { "aria-hidden": true; "data-testid"?: string }
+  | { accessible: true; accessibilityRole: "image"; accessibilityLabel: string; testID?: string }
+  | {
+      accessible: false;
+      accessibilityElementsHidden: true;
+      importantForAccessibility: "no-hide-descendants";
+      testID?: string;
+    };
+
+/**
+ * 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 }: { title?: string; testID?: string },
+  os: string,
+): SvgA11yProps {
+  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,
+      };
+}