@pickle-ui/react-native 0.0.0 → 1.0.0-beta.1

package/dist/components/_internal/Spinner.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Animated, Easing, Platform, View } from 'react-native';
+import { cn } from '../../lib/cn';
+/**
+ * The web `Spinner`'s look on native: a three-quarter ring turning once a
+ * second. Color it with a `border-*` class. Decorative: the control showing
+ * it reports the busy state.
+ */
+export function Spinner({ className }) {
+    const [turn] = useState(() => new Animated.Value(0));
+    useEffect(() => {
+        const loop = Animated.loop(Animated.timing(turn, {
+            duration: 1000,
+            easing: Easing.linear,
+            toValue: 1,
+            // react-native-web has no native driver and warns when asked for it.
+            useNativeDriver: Platform.OS !== 'web',
+        }));
+        loop.start();
+        return () => loop.stop();
+    }, [turn]);
+    const rotate = turn.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+    return (_jsx(Animated.View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: { transform: [{ rotate }] }, children: _jsx(View, { className: cn('border-foreground size-3 rounded-full border-[1.5px] opacity-80', className, 
+            // After the color, which would otherwise override the open side.
+            'border-t-transparent') }) }));
+}
+//# sourceMappingURL=Spinner.js.map

package/dist/components/_internal/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/_internal/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,SAAS,EAA0B;IAC3D,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CACxB,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE;YACpB,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,OAAO,EAAE,CAAC;YACV,qEAAqE;YACrE,eAAe,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK;SACvC,CAAC,CACH,CAAC;QACF,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;QAC9B,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;KAChC,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,QAAQ,CAAC,IAAI,IACZ,2BAA2B,QAC3B,yBAAyB,EAAC,qBAAqB,EAC/C,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,YAElC,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,iEAAiE,EACjE,SAAS;YACT,iEAAiE;YACjE,sBAAsB,CACvB,GACD,GACY,CACjB,CAAC;AACJ,CAAC"}

package/dist/entries/card.d.ts

@@ -1,3 +1,3 @@
 export { Card } from '../components/Card';
-export type { CardContentProps, CardDescriptionProps, CardHeaderProps, CardProps, CardTitleProps, } from '../components/Card';
+export type { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps, } from '../components/Card';
 //# sourceMappingURL=card.d.ts.map

package/dist/entries/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/entries/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,SAAS,EACT,cAAc,GACf,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/entries/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,eAAe,EACf,SAAS,EACT,cAAc,GACf,MAAM,oBAAoB,CAAC"}

package/dist/entries/theme.d.ts

@@ -0,0 +1,3 @@
+export { createTheme } from '@pickle-ui/tokens/theme';
+export type { Theme, ThemeFonts, ThemeOptions, ThemeVariables, } from '@pickle-ui/tokens/theme';
+//# sourceMappingURL=theme.d.ts.map

package/dist/entries/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/entries/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,YAAY,EACV,KAAK,EACL,UAAU,EACV,YAAY,EACZ,cAAc,GACf,MAAM,yBAAyB,CAAC"}

package/dist/entries/theme.js

@@ -0,0 +1,2 @@
+export { createTheme } from '@pickle-ui/tokens/theme';
+//# sourceMappingURL=theme.js.map

package/dist/entries/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/entries/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.d.ts

@@ -3,5 +3,6 @@ export * from './entries/button';
 export * from './entries/card';
 export * from './entries/cn';
 export * from './entries/text';
+export * from './entries/theme';
 export * from './entries/use-color-token';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}

package/dist/index.js

@@ -5,5 +5,6 @@ export * from './entries/button';
 export * from './entries/card';
 export * from './entries/cn';
 export * from './entries/text';
+export * from './entries/theme';
 export * from './entries/use-color-token';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,yEAAyE;AACzE,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,yEAAyE;AACzE,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}

package/dist/lib/cn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":"AAEA,wEAAwE;AACxE,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC,UAEtE"}
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":"AAeA,wEAAwE;AACxE,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC,UAEtE"}

package/dist/lib/cn.js

@@ -1,4 +1,16 @@
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+/**
+ * Teaches tailwind-merge Pickle's type scale: `text-body`, `text-h1`, … are
+ * font sizes, so they must not be mistaken for text colors and dropped next
+ * to one.
+ */
+const twMerge = extendTailwindMerge({
+    extend: {
+        theme: {
+            text: ['body', 'code', 'h1', 'h2', 'h3', 'h4', 'lead', 'small'],
+        },
+    },
+});
 /** Joins class names; later classes win, like `@pickle-ui/react/cn`. */
 export function cn(...classes) {
     return twMerge(classes.filter(Boolean).join(' '));

package/dist/lib/cn.js.map

@@ -1 +1 @@
-{"version":3,"file":"cn.js","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,wEAAwE;AACxE,MAAM,UAAU,EAAE,CAAC,GAAG,OAAiD;IACrE,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,CAAC"}
+{"version":3,"file":"cn.js","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD;;;;GAIG;AACH,MAAM,OAAO,GAAG,mBAAmB,CAAC;IAClC,MAAM,EAAE;QACN,KAAK,EAAE;YACL,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC;SAChE;KACF;CACF,CAAC,CAAC;AAEH,wEAAwE;AACxE,MAAM,UAAU,EAAE,CAAC,GAAG,OAAiD;IACrE,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pickle-ui/react-native",
-  "version": "0.0.0",
+  "version": "1.0.0-beta.1",
   "type": "module",
   "description": "React Native components for Expo, styled with Pickle UI's tokens through Uniwind.",
   "main": "dist/index.js",
@@ -49,12 +49,14 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "tailwind-merge": "^3.6.0",
-    "@pickle-ui/tokens": "1.0.0-beta.6"
+    "@pickle-ui/tokens": "1.0.0-beta.7"
   },
   "devDependencies": {
+    "@react-native/assets-registry": "0.88.0",
     "@react-native/jest-preset": "^0.88.1",
     "@storybook/addon-docs": "^10.6.3",
     "@storybook/react-native-web-vite": "^10.6.5",
+    "@tabler/icons-react-native": "^3.50.0",
     "@tailwindcss/vite": "^4.3.3",
     "@testing-library/react-native": "^14.1.0",
     "@types/jest": "^30.0.0",
@@ -67,6 +69,7 @@
     "react-doctor": "^0.5.6",
     "react-dom": "19.3.0",
     "react-native": "0.88.0",
+    "react-native-svg": "^15.16.0",
     "react-native-web": "^0.21.4",
     "storybook": "^10.6.3",
     "tailwindcss": "^4.3.3",

package/src/base.css

@@ -1,6 +1,11 @@
 /**
  * Pickle's components as a content source, so Uniwind generates the classes
- * they use. `styles.css` imports it; import it alone, after `uniwind`, to
- * bring your own token set instead of `@pickle-ui/tokens/native.css`.
+ * they use, and the type scale behind `Text`'s variants, shared with
+ * `@pickle-ui/react`. `styles.css` imports this file; import it alone, after
+ * `uniwind`, to bring your own token set instead of
+ * `@pickle-ui/tokens/native.css`. The type scale only declares theme
+ * variables, so it compiles in any order.
  */
+@import '@pickle-ui/tokens/typography.css';
+
 @source './components/**/*.{ts,tsx}';

package/src/components/Badge.stories.tsx

@@ -10,21 +10,48 @@ const meta = {
 } satisfies Meta<typeof Badge>;
 
 export default meta;
+type BadgeSize = NonNullable<BadgeProps['size']>;
+type BadgeVariant = NonNullable<BadgeProps['variant']>;
 type StoryDefinition = StoryObj<typeof meta>;
 
-const DISPLAY_COLUMNS = [{ key: 'label', label: 'Label only' }];
+const DISPLAY_COLUMNS = [
+  { key: 'label', label: 'Label only' },
+  { key: 'icon', label: 'With icon' },
+];
 
-const SEMANTIC_ROWS = [
+const SEMANTIC_ROWS: { key: BadgeVariant; label: string }[] = [
   { key: 'default', label: 'Default' },
   { key: 'secondary', label: 'Secondary' },
+  { key: 'outline', label: 'Outline' },
+  { key: 'info', label: 'Info' },
+  { key: 'success', label: 'Success' },
+  { key: 'warning', label: 'Warning' },
+  { key: 'error', label: 'Error' },
+  { key: 'destructive', label: 'Destructive' },
+];
+
+const STATUS_ROWS: { key: BadgeVariant; label: string }[] = [
+  { key: 'pending', label: 'Pending' },
+  { key: 'submitted', label: 'Submitted' },
   { key: 'inProgress', label: 'In progress' },
   { key: 'inReview', label: 'In review' },
-  { key: 'success', label: 'Success' },
+  { key: 'failed', label: 'Failed' },
+  { key: 'expired', label: 'Expired' },
 ];
 
-function SemanticBadgeCell({ row }: ComponentMatrixCellProps) {
+const SIZE_COLUMNS: { description: string; key: BadgeSize; label: string }[] = [
+  { description: 'h-4', key: 'sm', label: 'Small' },
+  { description: 'h-4.5', key: 'md', label: 'Medium' },
+  { description: 'h-5.5', key: 'lg', label: 'Large' },
+];
+
+function BadgeCell({ row }: ComponentMatrixCellProps) {
+  return <Badge variant={row.key as BadgeVariant}>{row.label}</Badge>;
+}
+
+function BadgeSizeCell({ column, row }: ComponentMatrixCellProps) {
   return (
-    <Badge variant={row.key as NonNullable<BadgeProps['variant']>}>
+    <Badge size={column.key as BadgeSize} variant={row.key as BadgeVariant}>
       {row.label}
     </Badge>
   );
@@ -36,12 +63,30 @@ export const All: StoryDefinition = {
     <Story.Layout className="max-w-4xl" title="Badge">
       <Story.Section title="Semantic badges">
         <Story.Matrix
-          Cell={SemanticBadgeCell}
+          Cell={BadgeCell}
           cellClassName="min-h-16"
           columns={DISPLAY_COLUMNS}
           rows={SEMANTIC_ROWS}
         />
       </Story.Section>
+
+      <Story.Section title="Statuses">
+        <Story.Matrix
+          Cell={BadgeCell}
+          cellClassName="min-h-16"
+          columns={DISPLAY_COLUMNS}
+          rows={STATUS_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Sizes">
+        <Story.Matrix
+          Cell={BadgeSizeCell}
+          cellClassName="min-h-16"
+          columns={SIZE_COLUMNS}
+          rows={SEMANTIC_ROWS.slice(0, 3)}
+        />
+      </Story.Section>
     </Story.Layout>
   ),
 };

package/src/components/Badge.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react-native';
+import { View } from 'react-native';
 
 import { Badge } from './Badge';
 
@@ -8,4 +9,18 @@ describe('Badge', () => {
 
     expect(screen.getByText('Shipped')).toBeOnTheScreen();
   });
+
+  it('renders icons next to the label', async () => {
+    await render(
+      <Badge size="lg" testID="badge" variant="warning">
+        <View testID="icon" />
+        Pending
+      </Badge>,
+    );
+
+    expect(screen.getByTestId('badge')).toContainElement(
+      screen.getByTestId('icon'),
+    );
+    expect(screen.getByText('Pending')).toBeOnTheScreen();
+  });
 });

package/src/components/Badge.tsx

@@ -1,42 +1,98 @@
 import { cva, type VariantProps } from 'class-variance-authority';
+import { Children, isValidElement } from 'react';
 import { Text, View } from 'react-native';
 
 import { cn } from '../lib/cn';
 
-// Status variants use the `-subtle` token pairs, like `Badge` on the web.
-const badgeVariants = cva('self-start rounded-sm px-1.5 py-0.5', {
-  defaultVariants: { variant: 'default' },
-  variants: {
-    variant: {
-      default: 'bg-primary',
-      inProgress: 'bg-info-subtle',
-      inReview: 'bg-warning-subtle',
-      secondary: 'bg-secondary',
-      success: 'bg-success-subtle',
+// Same variants and sizes as `Badge` in @pickle-ui/react.
+const badgeVariants = cva(
+  'flex-row items-center justify-center gap-1 self-start rounded-sm border border-transparent',
+  {
+    defaultVariants: { size: 'md', variant: 'default' },
+    variants: {
+      size: {
+        lg: 'h-5.5 min-w-5.5 px-1.5',
+        md: 'h-4.5 min-w-4.5 px-1',
+        sm: 'h-4 min-w-4 rounded px-1',
+      },
+      variant: {
+        default: 'bg-primary',
+        destructive: 'bg-destructive',
+        error: 'bg-destructive-subtle',
+        expired: 'bg-secondary',
+        failed: 'bg-destructive-subtle',
+        info: 'bg-info-subtle',
+        inProgress: 'bg-info-subtle',
+        inReview: 'bg-warning-subtle',
+        outline: 'border-input bg-background dark:bg-input/32',
+        pending: 'bg-warning-subtle',
+        secondary: 'bg-secondary',
+        submitted: 'bg-info-subtle',
+        success: 'bg-success-subtle',
+        warning: 'bg-warning-subtle',
+      },
     },
   },
-});
+);
 
-const labelVariants = cva('text-xs font-medium', {
-  defaultVariants: { variant: 'default' },
+const labelVariants = cva('font-medium', {
+  defaultVariants: { size: 'md', variant: 'default' },
   variants: {
+    size: {
+      lg: 'text-sm',
+      md: 'text-xs',
+      sm: 'text-[10px]',
+    },
     variant: {
       default: 'text-primary-foreground',
+      destructive: 'text-destructive-foreground',
+      error: 'text-destructive-subtle-foreground',
+      expired: 'text-secondary-foreground',
+      failed: 'text-destructive-subtle-foreground',
+      info: 'text-info-subtle-foreground',
       inProgress: 'text-info-subtle-foreground',
       inReview: 'text-warning-subtle-foreground',
+      outline: 'text-foreground',
+      pending: 'text-warning-subtle-foreground',
       secondary: 'text-secondary-foreground',
+      submitted: 'text-info-subtle-foreground',
       success: 'text-success-subtle-foreground',
+      warning: 'text-warning-subtle-foreground',
     },
   },
 });
 
 export type BadgeProps = React.ComponentProps<typeof View> &
-  VariantProps<typeof badgeVariants> & { children: string };
+  VariantProps<typeof badgeVariants> & {
+    /** Text is wrapped in the label; other children, such as icons, render as they are. */
+    children: React.ReactNode;
+    labelClassName?: string;
+  };
 
-export function Badge({ children, className, variant, ...props }: BadgeProps) {
+export function Badge({
+  children,
+  className,
+  labelClassName,
+  size = 'md',
+  variant = 'default',
+  ...props
+}: BadgeProps) {
   return (
-    <View className={cn(badgeVariants({ variant }), className)} {...props}>
-      <Text className={labelVariants({ variant })}>{children}</Text>
+    <View
+      className={cn(badgeVariants({ size, variant }), className)}
+      {...props}
+    >
+      {Children.map(children, (child) =>
+        typeof child === 'string' || typeof child === 'number' ? (
+          <Text
+            className={cn(labelVariants({ size, variant }), labelClassName)}
+          >
+            {child}
+          </Text>
+        ) : isValidElement(child) ? (
+          child
+        ) : null,
+      )}
     </View>
   );
 }

package/src/components/Button.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 
+import { IconPlus } from '@tabler/icons-react-native';
+
 import { type ComponentMatrixCellProps, Story } from './_internal/Story';
 import { Button, type ButtonProps } from './Button';
 
@@ -23,6 +25,7 @@ const STATE_COLUMNS: {
 }[] = [
   { key: 'default', label: 'Default', props: {} },
   { key: 'disabled', label: 'Disabled', props: { disabled: true } },
+  { key: 'loading', label: 'Loading', props: { loading: true } },
 ];
 
 const STATE_PROPS = Object.fromEntries(
@@ -36,20 +39,93 @@ const VARIANT_ROWS: {
   { key: 'default', label: 'Default' },
   { key: 'secondary', label: 'Secondary' },
   { key: 'destructive', label: 'Destructive' },
+  { key: 'destructive-outline', label: 'Destructive outline' },
   { key: 'outline', label: 'Outline' },
   { key: 'ghost', label: 'Ghost' },
+  { key: 'link', label: 'Link' },
+];
+
+const SIZE_COLUMNS: {
+  description: string;
+  icon: ButtonSize;
+  key: ButtonSize;
+  label: string;
+}[] = [
+  { description: 'h-6', icon: 'icon-xs', key: 'xs', label: 'Extra small' },
+  { description: 'h-7', icon: 'icon-sm', key: 'sm', label: 'Small' },
+  { description: 'h-8', icon: 'icon', key: 'md', label: 'Medium' },
+  { description: 'h-9', icon: 'icon-lg', key: 'lg', label: 'Large' },
+  { description: 'h-10', icon: 'icon-xl', key: 'xl', label: 'Extra large' },
+];
+
+const ICON_SIZES = Object.fromEntries(
+  SIZE_COLUMNS.map((column) => [column.key, column.icon]),
+) as Record<string, ButtonSize>;
+
+// The web's `[&_svg]:size-*` per button size, in points.
+const ICON_PIXELS: Record<string, number> = { xl: 18, xs: 14 };
+
+const CONTENT_ROWS = [
+  { key: 'text', label: 'Text' },
+  { key: 'with-icon', label: 'Icon and text' },
+  {
+    description: 'Use an icon size with accessibilityLabel',
+    key: 'icon',
+    label: 'Icon only',
+  },
 ];
 
-const SIZE_COLUMNS: { description: string; key: ButtonSize; label: string }[] =
-  [
-    { description: 'h-8', key: 'sm', label: 'Small' },
-    { description: 'h-10', key: 'md', label: 'Medium' },
-    { description: 'h-11', key: 'lg', label: 'Large' },
-  ];
+// Icons don't inherit the label's color on native; pass it to the icon.
+const ICON_COLORS: Record<ButtonVariant, string> = {
+  default: 'text-primary-foreground',
+  destructive: 'text-destructive-foreground',
+  'destructive-outline': 'text-destructive-subtle-foreground',
+  ghost: 'text-foreground',
+  link: 'text-foreground',
+  outline: 'text-foreground',
+  secondary: 'text-secondary-foreground',
+};
+
+function ButtonContentCell({ column, row }: ComponentMatrixCellProps) {
+  const variant = column.key as ButtonVariant;
+  const icon = <Story.Icon className={ICON_COLORS[variant]} icon={IconPlus} />;
+
+  if (row.key === 'icon') {
+    return (
+      <Button accessibilityLabel="Add" size="icon" variant={variant}>
+        {icon}
+      </Button>
+    );
+  }
+
+  return (
+    <Button variant={variant}>
+      {row.key === 'with-icon' ? icon : null}
+      Add
+    </Button>
+  );
+}
 
 function ButtonSizeCell({ column, row }: ComponentMatrixCellProps) {
+  const icon = (
+    <Story.Icon
+      className={ICON_COLORS.default}
+      icon={IconPlus}
+      size={ICON_PIXELS[column.key]}
+    />
+  );
+
+  if (row.key === 'icon') {
+    return (
+      <Button accessibilityLabel="Add" size={ICON_SIZES[column.key]}>
+        {icon}
+      </Button>
+    );
+  }
+
   return (
-    <Button size={column.key as ButtonSize} variant={row.key as ButtonVariant}>
+    <Button size={column.key as ButtonSize}>
+      {row.key === 'with-icon' ? icon : null}
       Add
     </Button>
   );
@@ -75,11 +151,23 @@ export const All: StoryDefinition = {
         />
       </Story.Section>
 
+      <Story.Section title="Content patterns">
+        <Story.Matrix
+          Cell={ButtonContentCell}
+          columns={[
+            { key: 'default', label: 'Default' },
+            { key: 'outline', label: 'Outline' },
+            { key: 'ghost', label: 'Ghost' },
+          ]}
+          rows={CONTENT_ROWS}
+        />
+      </Story.Section>
+
       <Story.Section title="Sizes">
         <Story.Matrix
           Cell={ButtonSizeCell}
           columns={SIZE_COLUMNS}
-          rows={VARIANT_ROWS}
+          rows={CONTENT_ROWS}
         />
       </Story.Section>
     </Story.Layout>

package/src/components/Button.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react-native';
+import { View } from 'react-native';
 
 import { Button } from './Button';
 
@@ -31,4 +32,72 @@ describe('Button', () => {
     expect(screen.getByRole('button')).toBeDisabled();
     expect(onPress).not.toHaveBeenCalled();
   });
+
+  it('renders icons next to the label', async () => {
+    await render(
+      <Button>
+        <View testID="icon" />
+        Add project
+      </Button>,
+    );
+
+    expect(screen.getByRole('button')).toContainElement(
+      screen.getByTestId('icon'),
+    );
+    expect(screen.getByText('Add project')).toBeOnTheScreen();
+  });
+
+  it('names an icon-only button with accessibilityLabel', async () => {
+    await render(
+      <Button accessibilityLabel="Add project" size="icon">
+        <View />
+      </Button>,
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Add project' }),
+    ).toBeOnTheScreen();
+  });
+
+  it('is busy and disabled while loading', async () => {
+    const onPress = jest.fn();
+    await render(
+      <Button loading onPress={onPress}>
+        Save
+      </Button>,
+    );
+
+    await fireEvent.press(screen.getByRole('button'));
+
+    expect(screen.getByRole('button')).toBeBusy();
+    expect(screen.getByRole('button')).toBeDisabled();
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('stretches every size to a 44pt touch target', async () => {
+    await render(
+      <>
+        <Button size="sm">Small</Button>
+        <Button accessibilityLabel="Add" size="icon">
+          +
+        </Button>
+        <Button hitSlop={0} size="xs">
+          Extra small
+        </Button>
+      </>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Small' })).toHaveProp(
+      'hitSlop',
+      { bottom: 8, top: 8 },
+    );
+    expect(screen.getByRole('button', { name: 'Add' })).toHaveProp(
+      'hitSlop',
+      6,
+    );
+    expect(screen.getByRole('button', { name: 'Extra small' })).toHaveProp(
+      'hitSlop',
+      0,
+    );
+  });
 });