@vvedantb/native-ui 0.3.14 → 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,7 +197,9 @@ 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 and `AppMark`) 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.
+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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.3.14",
+  "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/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";