@pickle-ui/react-native 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/entries/radio-group.js

@@ -0,0 +1,2 @@
+export { RadioGroup } from '../components/form/RadioGroup';
+//# sourceMappingURL=radio-group.js.map

package/dist/entries/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../src/entries/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/entries/separator.d.ts

@@ -0,0 +1,3 @@
+export { Separator } from '../components/Separator';
+export type { SeparatorProps } from '../components/Separator';
+//# sourceMappingURL=separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/entries/separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/entries/separator.js

@@ -0,0 +1,2 @@
+export { Separator } from '../components/Separator';
+//# sourceMappingURL=separator.js.map

package/dist/entries/separator.js.map

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

package/dist/entries/spinner.d.ts

@@ -0,0 +1,3 @@
+export { Spinner } from '../components/Spinner';
+export type { SpinnerProps } from '../components/Spinner';
+//# sourceMappingURL=spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/entries/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/entries/spinner.js

@@ -0,0 +1,2 @@
+export { Spinner } from '../components/Spinner';
+//# sourceMappingURL=spinner.js.map

package/dist/entries/spinner.js.map

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

package/dist/entries/textarea.d.ts

@@ -0,0 +1,3 @@
+export { Textarea } from '../components/form/Textarea';
+export type { TextareaProps } from '../components/form/Textarea';
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/entries/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/entries/textarea.js

@@ -0,0 +1,2 @@
+export { Textarea } from '../components/form/Textarea';
+//# sourceMappingURL=textarea.js.map

package/dist/entries/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../src/entries/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,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/entries/x-stack.d.ts

@@ -0,0 +1,3 @@
+export { XStack } from '../components/XStack';
+export type { XStackProps } from '../components/XStack';
+//# sourceMappingURL=x-stack.d.ts.map

package/dist/entries/x-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"x-stack.d.ts","sourceRoot":"","sources":["../../src/entries/x-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/entries/x-stack.js

@@ -0,0 +1,2 @@
+export { XStack } from '../components/XStack';
+//# sourceMappingURL=x-stack.js.map

package/dist/entries/x-stack.js.map

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

package/dist/entries/y-stack.d.ts

@@ -0,0 +1,3 @@
+export { YStack } from '../components/YStack';
+export type { YStackProps } from '../components/YStack';
+//# sourceMappingURL=y-stack.d.ts.map

package/dist/entries/y-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"y-stack.d.ts","sourceRoot":"","sources":["../../src/entries/y-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/entries/y-stack.js

@@ -0,0 +1,2 @@
+export { YStack } from '../components/YStack';
+//# sourceMappingURL=y-stack.js.map

package/dist/entries/y-stack.js.map

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

package/dist/index.d.ts

@@ -1,7 +1,20 @@
 export * from './entries/badge';
 export * from './entries/button';
 export * from './entries/card';
+export * from './entries/checkbox';
 export * from './entries/cn';
+export * from './entries/flex';
+export * from './entries/form';
+export * from './entries/grid';
+export * from './entries/input';
+export * from './entries/input-group';
+export * from './entries/radio-group';
+export * from './entries/separator';
+export * from './entries/spinner';
 export * from './entries/text';
+export * from './entries/textarea';
+export * from './entries/theme';
 export * from './entries/use-color-token';
+export * from './entries/x-stack';
+export * from './entries/y-stack';
 //# 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,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -3,7 +3,20 @@
 export * from './entries/badge';
 export * from './entries/button';
 export * from './entries/card';
+export * from './entries/checkbox';
 export * from './entries/cn';
+export * from './entries/flex';
+export * from './entries/form';
+export * from './entries/grid';
+export * from './entries/input';
+export * from './entries/input-group';
+export * from './entries/radio-group';
+export * from './entries/separator';
+export * from './entries/spinner';
 export * from './entries/text';
+export * from './entries/textarea';
+export * from './entries/theme';
 export * from './entries/use-color-token';
+export * from './entries/x-stack';
+export * from './entries/y-stack';
 //# 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,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,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": "1.0.0-beta.0",
+  "version": "1.0.0-beta.2",
   "type": "module",
   "description": "React Native components for Expo, styled with Pickle UI's tokens through Uniwind.",
   "main": "dist/index.js",
@@ -49,12 +49,15 @@
   "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": {
+    "@hookform/resolvers": "^5.4.0",
+    "@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",
@@ -66,17 +69,21 @@
     "react": "19.3.0",
     "react-doctor": "^0.5.6",
     "react-dom": "19.3.0",
+    "react-hook-form": "^7.79.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",
     "test-renderer": "^1.3.1",
     "typescript": "^6.0.3",
     "uniwind": "^1.13.0",
-    "vite": "^8.3.5"
+    "vite": "^8.3.5",
+    "zod": "4.0.17"
   },
   "peerDependencies": {
     "react": "^19.0.0",
+    "react-hook-form": "^7.0.0",
     "react-native": "*",
     "tailwindcss": "^4.0.0",
     "uniwind": "^1.13.0"

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>