@vvedantb/native-ui 0.5.0 → 0.6.0

package/README.md

@@ -60,8 +60,8 @@ The root entry exports everything. It still imports `BottomSheetContainer` and `
 | --- | --- | --- |
 | `@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`, `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`, `ThemeToggle` (from 0.3.16), `Tabs`, `PillTabs`, `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet`, `toast`, `Toaster`. From 0.5.0: `Text` and `TextClassContext` (only here, not on the root), `ColorSwatches`, `StatGrid`, `SectionLabel`, `SheetRow`, `PageIndicator`, `IconButton`, `CaptureButton`, and the `ListRowProps` and `CardProps` types | `expo-blur`, `expo-haptics` (loaders) |
+| `@vvedantb/native-ui/button` | `Button`, `ButtonProps`, `ButtonShape` (0.6.0), `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`, `ThemeToggle` (from 0.3.16), `Tabs`, `PillTabs`, `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet`, `toast`, `Toaster`. From 0.5.0: `Text` and `TextClassContext` (only here, not on the root), `ColorSwatches`, `StatGrid`, `SectionLabel`, `SheetRow`, `PageIndicator`, `IconButton`, `CaptureButton`, and the `ListRowProps` and `CardProps` types. From 0.6.0: the `ButtonShape` type | `expo-blur`, `expo-haptics` (loaders) |
 | `@vvedantb/native-ui/search-input` | `SearchInput`, `SearchInputProps` | none |
 | `@vvedantb/native-ui/page-title` | `PageTitle`, `PageHeader`, `PageTitleProps`, `PageHeaderProps` (from 0.3.13), `StackPageHeader`, `StackPageHeaderProps` (from 0.5.0; it brings the Tabler package for its chevron) | none |
 | `@vvedantb/native-ui/toast` | `toast`, `Toaster`, `ToastOptions`, `ToastVariant` | none (from 0.3.12) |
@@ -154,13 +154,13 @@ import { NativeUiProvider, Button, Card } from "@vvedantb/native-ui";
 
 **Switch the scheme through NativeWind only.** Call `useColorScheme().setColorScheme("dark"|"light")` (or use `ThemeToggle`). That updates `useScheme` and, with `darkMode: "class"`, the `<html>` class together. Do **not** toggle `document.documentElement.classList` (or a page-level CSS `.dark` rule) by hand while leaving NativeWind on light: the page background can go dark while every token-styled part stays on the light set. That dual-owner fault is an app bug, not a native-ui colour bug.
 
-`useLargerText()` steps type and tap targets up. Without it, `Button`, `Input`, `Textarea` and the `Select` trigger have the web sizes (`Button` 32 / 40 / 44 high, fields 40); with it they keep the larger 0.3.2 sizes. `accentColor` tints FABs, card icons and progress bars (checked checkboxes use the palette primary, as on the web). Surfaces use the tokens in `src/tokens.ts` for fill, radius (card 24, button 16, field 10, pill 999; rows 20) and spacing (16).
+`useLargerText()` steps type and tap targets up. Without it, `Button`, `Input`, `Textarea` and the `Select` trigger have the web sizes (`Button` 32 / 40 / 44 high, fields 40); with it they keep the larger 0.3.2 sizes. `accentColor` tints FABs, card icons and progress bars (checked checkboxes use the palette primary, as on the web). Surfaces use the tokens in `src/tokens.ts` for fill, radius (card 24, field 10, pill 999; rows 20) and spacing (16). `Button` is a pill (999) by default, and 16 with `shape="rounded"`.
 
 ## Components (0.3.0)
 
 | Area | Exports |
 | --- | --- |
-| Actions and fields | `Button` (`default`/`primary`, `secondary`, `outline`, `destructive`, `ghost`, `link`, `tinted`; `sm`/`small`, `default`/`medium`, `lg`/`large`, `icon`), `IconButton` (0.5.0), `CaptureButton` (0.5.0), `Input`, `SearchInput` (0.3.9), `Textarea`, `Label`, `Select`, `Switch`, `Checkbox`, `LabeledSwitchRow`, `ColorSwatches` (0.5.0), `DateTimeField` (date-only, empty and clearable from 0.5.0) |
+| Actions and fields | `Button` (`default`/`primary`, `secondary`, `outline`, `destructive`, `ghost`, `link`, `tinted`; `sm`/`small`, `default`/`medium`, `lg`/`large`, `icon`; `shape` `pill`/`rounded` from 0.6.0), `IconButton` (0.5.0), `CaptureButton` (0.5.0), `Input`, `SearchInput` (0.3.9), `Textarea`, `Label`, `Select`, `Switch`, `Checkbox`, `LabeledSwitchRow`, `ColorSwatches` (0.5.0), `DateTimeField` (date-only, empty and clearable from 0.5.0) |
 | Display | `Card` (+ `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`; `onPress` from 0.5.0), `Badge`, `StatusDot` (`info` from 0.5.0), `Avatar` (+ `AvatarImage`, `AvatarFallback`, `initials()`), `Separator`, `Progress`, `Spinner`, `CenteredSpinner`, `Skeleton`, `EmptyState` (+ `EmptyState.Root` and parts), `ListRow` (`leading`, `titleEnd`, `control`, `onLongPress` from 0.5.0), `StatGrid` (0.5.0), `SectionLabel` (0.5.0), `Chip`, `Text` (0.5.0, `/primitives` only) |
 | Navigation | `Tabs` (+ `TabsList`, `TabsTrigger`, `TabsContent`), `PillTabs`, `PageIndicator` (0.5.0), `FloatingTabBar`, `FloatingFAB`, `HeaderIconButton`, `ThemeToggle` (0.3.16), `StackPageHeader` (0.5.0) |
 | Overlays | `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet` (RN `Modal`, each with the web part names), `SheetRow` (0.5.0), `BottomSheetContainer` (`@gorhom/bottom-sheet`) |
@@ -168,6 +168,15 @@ import { NativeUiProvider, Button, Card } from "@vvedantb/native-ui";
 | 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` |
 
+**`Button` `shape` (0.6.0).** `Button` is a pill by default, as the web `Button` from `@vvedantb/ui` 0.31.0: `shape="pill"` is fully round (`tokens.radius.pill`, web `rounded-full`) for every variant and size, so `size="icon"` is a circle. `shape="rounded"` keeps the radius from before 0.6.0: 16 at every size (web `rounded-lg`). The web `rounded` is 14 (`rounded-md`) on `xs` and `icon-xs`; native has neither size. The radius is a style, so a `style` radius such as `style={{ borderRadius: 8 }}` wins over either shape; a `className` radius does not.
+
+```tsx
+<Button>Save</Button>                 {/* pill */}
+<Button shape="rounded">Save</Button> {/* radius 16, the 0.5.1 look */}
+```
+
+Parts that render `Button` are pills too. As on the web: `AlertDialogAction`, `AlertDialogCancel` and so the `ConfirmDialog` buttons (also full width in the compact sheet), the `PricingModal` CTA, and in `/ai` `MessageAction`, `CodeBlockCopyButton` and `ConversationScrollButton`. `PromptInputSubmit` and `PromptInputButton` are pills as well, so they are circles at 32 and at 44 with larger text. The web keeps them `shape="rounded"`, but its 16 radius on their 32 size draws the same circle. `AlertDialogAction`, `AlertDialogCancel` and `PromptInputButton` pass `shape` on; `MessageAction`, `CodeBlockCopyButton`, `ConversationScrollButton` and `PromptInputSubmit` take no `shape` and stay round. Components that do not render `Button`, such as `IconButton`, `HeaderIconButton`, `CaptureButton`, `UpgradeToProCard`, inputs, cards, dialogs and sheets, keep their radius.
+
 Overlays hold their own open state, or take `open` and `onOpenChange`:
 
 ```tsx

package/package.json

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

package/src/Button.tsx

@@ -16,9 +16,12 @@ import { useScheme } from "./useScheme";
 /** `sm`, `default` and `lg` are the web names for `small`, `medium` and `large`. `icon` is a square button. */
 type ButtonSize = "small" | "medium" | "large" | "sm" | "default" | "lg" | "icon";
 
+/** The web `shape`. `"pill"` (default) is fully round; `"rounded"` is radius 16, the look before 0.6.0. */
+type ButtonShape = "pill" | "rounded";
+
 interface ButtonProps extends Omit<
   React.ComponentPropsWithoutRef<typeof PrimitiveButton>,
-  "variant" | "size" | "children" | "onPress"
+  "variant" | "size" | "shape" | "children" | "onPress"
 > {
   onPress?: () => void;
   variant?: ButtonVariant;
@@ -30,6 +33,13 @@ interface ButtonProps extends Omit<
   endContent?: React.ReactNode;
   loading?: boolean;
   size?: ButtonSize;
+  /**
+   * Default `"pill"`: fully round at every size and variant, so `icon` is a
+   * circle (web `rounded-full`). `"rounded"`: radius 16 at every size, the
+   * look before 0.6.0 (web `shape="rounded"`, `rounded-lg`). A `style`
+   * radius wins over either.
+   */
+  shape?: ButtonShape;
   /**
    * Default `true`. In the stacked footer of a compact dialog the button fills
    * the width whatever this says, as on the web.
@@ -84,8 +94,16 @@ const HIT_SLOP = {
   larger: { small: 8, medium: undefined, large: undefined, icon: 8 },
 };
 
-/** Web `rounded-lg` (`--radius`, 16). A style, because apps' NativeWind themes set their own `rounded-lg`. */
-const RADIUS = tokens.radius.lg;
+// The web `shape` (from @vvedantb/ui 0.31.0). `pill` is `rounded-full`:
+// `tokens.radius.pill` (999), far more than half the tallest minimum height
+// (72), so the ends are half circles. `rounded` is `rounded-lg` (`--radius`, 16). The web
+// `rounded` is `rounded-md` on `xs` and `icon-xs`, sizes native does not have,
+// so here it is 16 at every size. Styles, because apps' NativeWind themes set
+// their own `rounded-lg`.
+const RADIUS: Record<ButtonShape, number> = {
+  pill: tokens.radius.pill,
+  rounded: tokens.radius.lg,
+};
 
 // Colours come from `buttonColors` as styles, except `tinted`, which keeps
 // the pink classes that `outline` used before 0.3.0.
@@ -110,7 +128,7 @@ const PRIMITIVE_VARIANT = {
   tinted: "secondary",
 } as const;
 
-export type { ButtonProps, ButtonSize, ButtonVariant };
+export type { ButtonProps, ButtonShape, ButtonSize, ButtonVariant };
 
 export function Button({
   onPress,
@@ -121,6 +139,7 @@ export function Button({
   endContent,
   loading,
   size = "medium",
+  shape = "pill",
   fullWidth = true,
   children,
   shadowType = "flat",
@@ -136,7 +155,7 @@ export function Button({
   const elevate =
     shadowType === "shadow" && (variant === "primary" || variant === "default");
   const baseStyle = [
-    { borderRadius: RADIUS },
+    { borderRadius: RADIUS[shape] },
     elevate ? floatingShadow : null,
     colors
       ? { backgroundColor: colors.backgroundColor, borderColor: colors.borderColor }
@@ -159,6 +178,7 @@ export function Button({
     <PrimitiveButton
       onPress={onPress}
       variant={PRIMITIVE_VARIANT[variant]}
+      shape={shape}
       hitSlop={HIT_SLOP[scale][resolvedSize]}
       accessibilityRole="button"
       className={cn(

package/src/ai/icon-button.tsx

@@ -22,6 +22,7 @@ export type ChatIconButtonProps = Omit<ButtonProps, "children" | "size" | "icon"
  * A round `Button` at the web `icon-sm` size (32), with the slop to 44. With
  * larger text it is painted 44 with a 20 icon. The message
  * actions, the composer tools and its send button, and the code copy button.
+ * Round from the `Button` pill default; `shape="rounded"` gives radius 16.
  */
 export function ChatIconButton({
   icon: Icon,
@@ -42,7 +43,6 @@ export function ChatIconButton({
       accessibilityLabel={label}
       hitSlop={touchSlop(size)}
       className={cn(largerText ? "h-11 w-11" : "h-8 w-8", className)}
-      style={{ borderRadius: size / 2 }}
       {...props}
     >
       <Icon size={largerText ? 20 : 16} color={color} />

package/src/ai/prompt-input.tsx

@@ -27,6 +27,11 @@ export type PromptInputSubmitProps = {
   testID?: string;
 };
 
+// The web `PromptInputSubmit` and `PromptInputButton` keep `shape="rounded"`
+// (`rounded-lg`, 16) as field addons. At the 32 `icon-sm` size 16 is half the
+// side, so the web draws a circle. These stay pills: the same circle at 32, and
+// still a circle at 44 with larger text, where 16 would draw a rounded square.
+
 /**
  * Send, or stop while the AI answers: the web `default` `icon-sm` button
  * (32, round, slop to 44). Send is an up arrow on the primary fill, and the

package/src/brand/AppIcons.tsx

@@ -101,3 +101,5 @@ export const IconVmem = APP_ICONS.vmem;
 export const IconVerve = APP_ICONS.verve;
 export const IconVelth = APP_ICONS.velth;
 export const IconProjectV = APP_ICONS.projectv;
+export const IconEva = APP_ICONS.eva;
+export const IconBee = APP_ICONS.bee;

package/src/brand/AppWordmark.tsx

@@ -6,8 +6,8 @@ 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">;
+/** The five product apps. `projectv` keeps its Michroma wordmark and never uses `AppWordmark`. `eva` and `bee` are icons only. */
+export type ProductAppName = Exclude<AppName, "projectv" | "eva" | "bee">;
 
 export type AppWordmarkProps = {
   /** Which product app's name to show. The label is always the lowercase app id. */

package/src/brand/familyApps.ts

@@ -1,7 +1,10 @@
 import type { AppName } from "./svg";
 
+/** Apps in the Project V family. `eva` and `bee` have marks and icons but are not family apps. */
+export type FamilyAppName = Exclude<AppName, "eva" | "bee">;
+
 export type FamilyApp = {
-  app: AppName;
+  app: FamilyAppName;
   /** Display name. */
   name: string;
   /** Home page of the app. */
@@ -19,6 +22,6 @@ export const FAMILY_APPS: readonly FamilyApp[] = [
 ];
 
 /** Entry of `FAMILY_APPS` for an app. */
-export function familyApp(app: AppName): FamilyApp {
+export function familyApp(app: FamilyAppName): FamilyApp {
   return FAMILY_APPS.find((entry) => entry.app === app)!;
 }

package/src/brand/index.ts

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

package/src/brand/svg.ts

@@ -1,7 +1,8 @@
 // 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;
+/** Every mark. `eva` and `bee` are marks and icons only: they are not family apps, so `FAMILY_APPS` leaves them out. */
+export const APP_NAMES = ["projectv", "vibot", "vhub", "vmem", "verve", "velth", "eva", "bee"] as const;
 
 export type AppName = (typeof APP_NAMES)[number];
 
@@ -36,7 +37,9 @@ export function markLinecap(app: AppName): "butt" | "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.
+ * `vibot`, `vhub`, `vmem` and `projectv` are traced from the approved 1024px renders. `eva` (option A,
+ * a filled four-point star) and `bee` (option D, an orb with eyes, stripes and antennae) are the final
+ * vectors from their design sheet, as drawn there.
  */
 export const APP_MARKS: Record<AppName, MarkShape> = {
   projectv: {
@@ -77,6 +80,22 @@ export const APP_MARKS: Record<AppName, MarkShape> = {
       "M512 732.3C644.2 652.1 734.3 471.9 724.3 301.6C604.1 371.7 524 552 512 732.3Z",
     ],
   },
+  eva: {
+    kind: "fill",
+    paths: ["M242.9 512Q485.1 485.1 512 278.8Q538.9 485.1 781 512Q538.9 538.9 512 745.1Q485.1 538.9 242.9 512Z"],
+  },
+  bee: {
+    kind: "stroke",
+    paths: [
+      "M304 530.7A208.1 208.1 0 1 1 720.1 530.7A208.1 208.1 0 1 1 304 530.7",
+      "M447.5 414.2L447.5 445.4",
+      "M576.5 414.2L576.5 445.4",
+      "M306.3 561.9L717.7 561.9",
+      "M344 653.4L680 653.4",
+      "M468.3 341.4Q455.8 291.4 420.5 260.2",
+      "M555.7 341.4Q568.2 291.4 603.5 260.2",
+    ],
+  },
 };
 
 type Point = [number, number];
@@ -180,6 +199,7 @@ export function markBBox(app: AppName): Box {
  * (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.
+ * Historical: this union covers those five only. `eva` and `bee` reuse the 629 side but are not part of it.
  */
 export const APP_MARK_CROP_VIEWBOX = "173 197 629 629";
 
@@ -190,9 +210,9 @@ export const APP_MARK_CROP_VIEWBOX = "173 197 629 629";
 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.
+ * Plain-mark viewBox per app. Always square. Every mark except `projectv` keeps 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,
@@ -201,6 +221,8 @@ export const APP_MARK_VIEWBOX: Record<AppName, string> = {
   vmem: "197.24772201231343 196.33100022273135 629 629",
   verve: "197.5 210.9 629 629",
   velth: "197.5 202.45 629 629",
+  eva: "197.45 197.45 629 629",
+  bee: "197.55 187.2807619340906 629 629",
 };
 
 /**
@@ -215,6 +237,8 @@ export const APP_MARK_VIEWBOX_START: Record<AppName, string> = {
   vmem: "255.5301217210191 196.33100022273135 629 629",
   verve: "260.4 210.9 629 629",
   velth: "273.9433593555699 202.45 629 629",
+  eva: "242.9 197.45 629 629",
+  bee: "278.94999999999993 187.2807619340906 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. */

package/src/brand/vProAppBenefits.ts

@@ -2,7 +2,7 @@ import type { AppName } from "./svg";
 
 /** Benefits for one app, shown under that app's icon and name. */
 export type PricingPlanAppBenefit = {
-  app: Exclude<AppName, "projectv">;
+  app: Exclude<AppName, "projectv" | "eva" | "bee">;
   items: readonly string[];
 };
 

package/src/entries/button.ts

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

package/src/entries/primitives.ts

@@ -4,7 +4,7 @@
 // `primitives/text` variants (from 0.5.0); they are not on the root entry.
 export { Text, TextClassContext } from "../primitives/text";
 export { Button } from "../Button";
-export type { ButtonProps, ButtonSize, ButtonVariant } from "../Button";
+export type { ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from "../Button";
 export { Input } from "../Input";
 export type { InputProps } from "../Input";
 export { SearchInput } from "../SearchInput";

package/src/examples/ParityGallery.tsx

@@ -294,6 +294,27 @@ function GalleryScreen() {
             <Button size="lg" fullWidth={false}>
               Large
             </Button>
+            <Button size="icon" variant="outline" accessibilityLabel="Copy" onPress={() => toast("Copied")}>
+              <IconCopy size={16} color={tokens.color.foreground[scheme]} />
+            </Button>
+          </View>
+          {/* Pills by default, as on the web. `shape="rounded"` keeps radius 16, the look before 0.6.0. */}
+          <View className="flex-row flex-wrap items-center gap-2">
+            <Button shape="rounded" size="sm" fullWidth={false}>
+              Rounded
+            </Button>
+            <Button shape="rounded" variant="secondary" fullWidth={false}>
+              Rounded
+            </Button>
+            <Button
+              shape="rounded"
+              size="icon"
+              variant="outline"
+              accessibilityLabel="Copy"
+              onPress={() => toast("Copied")}
+            >
+              <IconCopy size={16} color={tokens.color.foreground[scheme]} />
+            </Button>
           </View>
         </Section>
 

package/src/index.ts

@@ -38,7 +38,7 @@ export { FloatingTabBar } from "./FloatingTabBar";
 export type { FloatingTabBarProps } from "./FloatingTabBar";
 export { FloatingFAB } from "./FloatingFAB";
 export { Button } from "./Button";
-export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
+export type { ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from "./Button";
 export { Input } from "./Input";
 export type { InputProps } from "./Input";
 export { SearchInput } from "./SearchInput";

package/src/marketing/PricingModal.tsx

@@ -11,7 +11,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { IconCheck, IconX } from "@tabler/icons-react-native";
 import { APP_ICONS, IconProjectV } from "../brand/AppIcons";
 import type { ProductAppName } from "../brand/AppWordmark";
-import { familyApp } from "../brand/familyApps";
+import { familyApp, type FamilyAppName } from "../brand/familyApps";
 import type { AppName } from "../brand/svg";
 import { Button } from "../Button";
 import { cn } from "../cn";
@@ -41,8 +41,8 @@ export type PricingModalProps = {
   description?: string;
   /** Cards, top to bottom. */
   plans: readonly PricingPlan[];
-  /** App marks at the top left. */
-  apps?: readonly AppName[];
+  /** App marks at the top left. Family apps only: each links to its `FAMILY_APPS` site. */
+  apps?: readonly FamilyAppName[];
   /** App the modal is shown in. Its `appBenefits` group comes first. */
   currentApp?: ProductAppName;
   /** Centred headline, for example "One plan. Every V app." */

package/src/primitives/button.tsx

@@ -6,7 +6,7 @@ import { Platform, Pressable } from "react-native";
 
 const buttonVariants = cva(
   cn(
-    "group flex-row items-center justify-center gap-2 rounded-lg shadow-none active:opacity-80",
+    "group flex-row items-center justify-center gap-2 shadow-none active:opacity-80",
     Platform.select({
       web: "outline-none transition-all",
     }),
@@ -39,10 +39,17 @@ const buttonVariants = cva(
         lg: "h-11 px-6",
         icon: "h-10 w-10",
       },
+      // The web `shape`: `pill` (default) is fully round, `rounded` the radius
+      // before 0.6.0. `Button` also sets the radius as a style, which wins.
+      shape: {
+        pill: "rounded-full",
+        rounded: "rounded-lg",
+      },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
+      shape: "pill",
     },
   },
 );
@@ -80,13 +87,13 @@ type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
 const Button = React.forwardRef<
   React.ElementRef<typeof Pressable>,
   ButtonProps
->(({ className, variant, size, ...props }, ref) => {
+>(({ className, variant, size, shape, ...props }, ref) => {
   return (
     <TextClassContext.Provider value={buttonTextVariants({ variant, size })}>
       <Pressable
         ref={ref}
         className={cn(
-          buttonVariants({ variant, size }),
+          buttonVariants({ variant, size, shape }),
           props.disabled && "opacity-45",
           className,
         )}