@vvedantb/native-ui 0.5.1 → 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.1",
+  "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/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/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,
         )}