@oxyhq/bloom 0.5.0 → 0.5.1

package/lib/module/fonts/font-data.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["blomusModernusRegular","blomusModernusBold","interVariable","geistMonoVariable"],"sourceRoot":"../../../src","sources":["fonts/font-data.web.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,qBAA6B,GAAG,ioqGAAioqG;AAC9qqG,OAAO,MAAMC,kBAA0B,GAAG,qlqGAAqlqG;AAC/nqG,OAAO,MAAMC,aAAqB,GAAG,i39DAAi39D;AACt59D,OAAO,MAAMC,iBAAyB,GAAG,i9tCAAi9tC","ignoreList":[]}

package/lib/module/fonts/index.web.js

@@ -3,10 +3,10 @@
 // Web variant of the `./fonts` barrel.
 //
 // The default barrel (`./index.ts`) re-exports `applyFontFaces` from
-// `./apply-font-faces`, which on native resolves to a no-op stub — Metro
-// cannot parse `.woff2` module-level imports. The web fork explicitly
-// reaches for `./apply-font-faces.web`, which performs the real `@font-face`
-// injection.
+// `./apply-font-faces`, which on native is a no-op stub. The web fork
+// explicitly reaches for `./apply-font-faces.web`, which performs the real
+// `@font-face` injection using inlined base64 data URLs (see
+// `font-data.web.ts`).
 //
 // Web bundlers select this file via the `"browser"` condition in
 // `package.json`'s `exports['./fonts']`; native bundlers fall through to

package/lib/typescript/commonjs/fonts/FontLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FontLoader.d.ts","sourceRoot":"","sources":["../../../../src/fonts/FontLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAOhE"}
+{"version":3,"file":"FontLoader.d.ts","sourceRoot":"","sources":["../../../../src/fonts/FontLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAUtC,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAOhE"}

package/lib/typescript/commonjs/fonts/apply-font-faces.web.d.ts

@@ -3,10 +3,17 @@
  *
  * Web-only. The native counterpart in `apply-font-faces.ts` is a no-op
  * stub — Metro cannot parse `.woff2` imports, so the file split keeps
- * those imports out of the native bundle entirely. Idempotent: safe to
+ * the font payload out of the native bundle entirely. Idempotent: safe to
  * call multiple times; subsequent calls early-return after the
  * `<style id="bloom-fonts">` tag has been mounted. SSR-safe via the
  * `typeof document === 'undefined'` guard.
+ *
+ * The font URLs come from `./font-data.web`, a generated module that
+ * embeds the woff2 bytes as base64 data URLs. Inlining (rather than
+ * relying on bundler asset loaders for `.woff2`) means consumers do not
+ * have to extend Metro's `assetExts` or add a webpack/Vite asset rule —
+ * the published JS is self-contained. See `scripts/generate-font-data.mjs`
+ * for the rationale and trade-offs.
  */
 export declare function applyFontFaces(): void;
 //# sourceMappingURL=apply-font-faces.web.d.ts.map

package/lib/typescript/commonjs/fonts/apply-font-faces.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-font-faces.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/apply-font-faces.web.ts"],"names":[],"mappings":"AASA;;;;;;;;;GASG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAkBrC"}
+{"version":3,"file":"apply-font-faces.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/apply-font-faces.web.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAkBrC"}

package/lib/typescript/commonjs/fonts/font-data.web.d.ts

@@ -0,0 +1,5 @@
+export declare const blomusModernusRegular: string;
+export declare const blomusModernusBold: string;
+export declare const interVariable: string;
+export declare const geistMonoVariable: string;
+//# sourceMappingURL=font-data.web.d.ts.map

package/lib/typescript/commonjs/fonts/font-data.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-data.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-data.web.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,qBAAqB,EAAE,MAA0oqG,CAAC;AAC/qqG,eAAO,MAAM,kBAAkB,EAAE,MAA8lqG,CAAC;AAChoqG,eAAO,MAAM,aAAa,EAAE,MAA039D,CAAC;AACv59D,eAAO,MAAM,iBAAiB,EAAE,MAA09tC,CAAC"}

package/lib/typescript/module/fonts/FontLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FontLoader.d.ts","sourceRoot":"","sources":["../../../../src/fonts/FontLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAOhE"}
+{"version":3,"file":"FontLoader.d.ts","sourceRoot":"","sources":["../../../../src/fonts/FontLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAUtC,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAOhE"}

package/lib/typescript/module/fonts/apply-font-faces.web.d.ts

@@ -3,10 +3,17 @@
  *
  * Web-only. The native counterpart in `apply-font-faces.ts` is a no-op
  * stub — Metro cannot parse `.woff2` imports, so the file split keeps
- * those imports out of the native bundle entirely. Idempotent: safe to
+ * the font payload out of the native bundle entirely. Idempotent: safe to
  * call multiple times; subsequent calls early-return after the
  * `<style id="bloom-fonts">` tag has been mounted. SSR-safe via the
  * `typeof document === 'undefined'` guard.
+ *
+ * The font URLs come from `./font-data.web`, a generated module that
+ * embeds the woff2 bytes as base64 data URLs. Inlining (rather than
+ * relying on bundler asset loaders for `.woff2`) means consumers do not
+ * have to extend Metro's `assetExts` or add a webpack/Vite asset rule —
+ * the published JS is self-contained. See `scripts/generate-font-data.mjs`
+ * for the rationale and trade-offs.
  */
 export declare function applyFontFaces(): void;
 //# sourceMappingURL=apply-font-faces.web.d.ts.map

package/lib/typescript/module/fonts/apply-font-faces.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-font-faces.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/apply-font-faces.web.ts"],"names":[],"mappings":"AASA;;;;;;;;;GASG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAkBrC"}
+{"version":3,"file":"apply-font-faces.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/apply-font-faces.web.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAkBrC"}

package/lib/typescript/module/fonts/font-data.web.d.ts

@@ -0,0 +1,5 @@
+export declare const blomusModernusRegular: string;
+export declare const blomusModernusBold: string;
+export declare const interVariable: string;
+export declare const geistMonoVariable: string;
+//# sourceMappingURL=font-data.web.d.ts.map

package/lib/typescript/module/fonts/font-data.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-data.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-data.web.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,qBAAqB,EAAE,MAA0oqG,CAAC;AAC/qqG,eAAO,MAAM,kBAAkB,EAAE,MAA8lqG,CAAC;AAChoqG,eAAO,MAAM,aAAa,EAAE,MAA039D,CAAC;AACv59D,eAAO,MAAM,iBAAiB,EAAE,MAA09tC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -582,20 +582,42 @@
   "license": "MIT",
   "scripts": {
     "generate:exports": "node scripts/generate-platform-exports.mjs",
-    "prebuild": "node scripts/generate-platform-exports.mjs",
+    "generate:font-data": "node scripts/generate-font-data.mjs",
+    "prebuild": "node scripts/generate-platform-exports.mjs && node scripts/generate-font-data.mjs",
     "build": "bob build",
     "test": "jest",
+    "pretest": "node scripts/generate-font-data.mjs",
     "typescript": "tsc --noEmit",
+    "pretypescript": "node scripts/generate-font-data.mjs",
     "clean": "rm -rf lib",
     "prepare": "bob build || true",
-    "release": "rm -rf lib && npm run build && release-it"
+    "release": "rm -rf lib && bun run build && release-it",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "storybook:build": "storybook build -o storybook-static"
+  },
+  "release-it": {
+    "git": {
+      "tagName": "@oxyhq/bloom@${version}",
+      "tagAnnotation": "Release @oxyhq/bloom@${version}",
+      "commitMessage": "chore: release @oxyhq/bloom@${version}"
+    },
+    "github": {
+      "release": true,
+      "releaseName": "@oxyhq/bloom@${version}"
+    },
+    "npm": {
+      "publish": true
+    }
   },
   "devDependencies": {
+    "@storybook/addon-docs": "^10",
+    "@storybook/react-vite": "^10",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",
     "@types/react": "~19.1.0",
     "@types/react-dom": "^19.2.3",
     "@types/react-native": "*",
+    "@vitejs/plugin-react": "^6.0.2",
     "expo-font": "^56.0.5",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.4.1",
@@ -607,12 +629,15 @@
     "react-native-reanimated": "^4.2.2",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-svg": "^15.15.3",
+    "react-native-web": "^0.21.2",
     "react-test-renderer": "^19.2.0",
     "release-it": "^19.0.6",
     "sonner": "^2.0.3",
     "sonner-native": "^0.23.1",
+    "storybook": "^10",
     "ts-jest": "^29.4.6",
-    "typescript": "~5.9.2"
+    "typescript": "~5.9.2",
+    "vite": "^7"
   },
   "peerDependencies": {
     "expo": "*",
@@ -656,6 +681,7 @@
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
+    "exclude": "{**/{__tests__,__fixtures__,__mocks__}/**,**/*.stories.{ts,tsx},**/*.{test,spec}.{ts,tsx},**/*.woff2}",
     "targets": [
       [
         "commonjs",
@@ -669,7 +695,12 @@
           "esm": true
         }
       ],
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   },
   "dependencies": {

package/src/avatar/Avatar.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Avatar } from './Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  argTypes: {
+    size: {
+      control: { type: 'number', min: 16, max: 256, step: 4 },
+    },
+    shape: {
+      control: 'select',
+      options: ['circle', 'squircle'],
+    },
+    verified: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+const SAMPLE_URI =
+  'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop';
+
+export const Basic: Story = {
+  args: { size: 64, name: 'Nate Isern' },
+};
+
+export const FromUri: Story = {
+  args: { size: 64, uri: SAMPLE_URI },
+  name: 'From URI',
+};
+
+export const Initials: Story = {
+  args: { size: 64, name: 'Ada Lovelace' },
+};
+
+export const Squircle: Story = {
+  args: { size: 64, name: 'Ada Lovelace', shape: 'squircle' },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+      <Avatar size={24} name="Ada" />
+      <Avatar size={32} name="Ada" />
+      <Avatar size={40} name="Ada" />
+      <Avatar size={56} name="Ada" />
+      <Avatar size={80} name="Ada" />
+      <Avatar size={120} name="Ada" />
+    </View>
+  ),
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+      <Avatar size={48} name="Ada Lovelace" />
+      <Avatar size={48} name="Grace Hopper" />
+      <Avatar size={48} name="Alan Turing" />
+      <Avatar size={48} name="Linus Torvalds" />
+      <Avatar size={48} name="Margaret Hamilton" />
+    </View>
+  ),
+};

package/src/bottom-sheet/BottomSheet.stories.tsx

@@ -0,0 +1,92 @@
+import React, { useRef } from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../button';
+import { BottomSheet, type BottomSheetRef } from './index';
+
+const meta: Meta<typeof BottomSheet> = {
+  title: 'Components/BottomSheet',
+  component: BottomSheet,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BottomSheet>;
+
+function BasicSheet() {
+  const ref = useRef<BottomSheetRef>(null);
+  return (
+    <>
+      <Button onPress={() => ref.current?.present()}>Open sheet</Button>
+      <BottomSheet ref={ref}>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>Bottom sheet</Text>
+          <Text>
+            Pan down to close, or tap the backdrop. This is the default sheet
+            (flush, rounded top corners only).
+          </Text>
+        </View>
+      </BottomSheet>
+    </>
+  );
+}
+
+function DetachedSheet() {
+  const ref = useRef<BottomSheetRef>(null);
+  return (
+    <>
+      <Button onPress={() => ref.current?.present()}>Open detached</Button>
+      <BottomSheet ref={ref} detached>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>Detached</Text>
+          <Text>
+            Floating card with margins and rounded corners on all sides.
+          </Text>
+        </View>
+      </BottomSheet>
+    </>
+  );
+}
+
+function NonScrollableSheet() {
+  const ref = useRef<BottomSheetRef>(null);
+  return (
+    <>
+      <Button onPress={() => ref.current?.present()}>Open non-scrollable</Button>
+      <BottomSheet ref={ref} scrollable={false}>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>
+            Non-scrollable
+          </Text>
+          <Text>
+            Use when the body owns its own VirtualizedList (FlatList,
+            SectionList, etc.).
+          </Text>
+        </View>
+      </BottomSheet>
+    </>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <BasicSheet />,
+};
+
+export const Detached: Story = {
+  render: () => <DetachedSheet />,
+};
+
+export const NonScrollable: Story = {
+  render: () => <NonScrollableSheet />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <BasicSheet />
+      <DetachedSheet />
+      <NonScrollableSheet />
+    </View>
+  ),
+};

package/src/button/Button.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  args: {
+    children: 'Button',
+    onPress: () => {},
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'inverse', 'icon', 'ghost', 'text'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
+  args: { children: 'Save' },
+};
+
+export const Primary: Story = {
+  args: { variant: 'primary', children: 'Primary' },
+};
+
+export const Secondary: Story = {
+  args: { variant: 'secondary', children: 'Secondary' },
+};
+
+export const Ghost: Story = {
+  args: { variant: 'ghost', children: 'Ghost' },
+};
+
+export const TextOnly: Story = {
+  args: { variant: 'text', children: 'Text button' },
+  name: 'Text',
+};
+
+export const Inverse: Story = {
+  args: { variant: 'inverse', children: 'Inverse' },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="inverse">Inverse</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="text">Text</Button>
+    </View>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <Button size="small">Small</Button>
+      <Button size="medium">Medium</Button>
+      <Button size="large">Large</Button>
+    </View>
+  ),
+};
+
+export const Loading: Story = {
+  args: { loading: true, children: 'Submitting' },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, children: 'Disabled' },
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+      <Button variant="primary">Save</Button>
+      <Button variant="secondary">Cancel</Button>
+    </View>
+  ),
+};

package/src/context-menu/ContextMenu.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { useTheme } from '../theme/use-theme';
+import * as ContextMenu from './index';
+
+const meta: Meta = {
+  title: 'Components/ContextMenu',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function TriggerSurface() {
+  const theme = useTheme();
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger label="Long-press for actions">
+        {({ props }) => (
+          <Pressable
+            onPress={() => props.onPress?.()}
+            onLongPress={() => props.onLongPress?.()}
+            accessibilityLabel={props.accessibilityLabel}
+            accessibilityHint={props.accessibilityHint}
+            style={{
+              padding: 24,
+              borderRadius: 12,
+              backgroundColor: theme.colors.backgroundSecondary,
+              borderWidth: 1,
+              borderColor: theme.colors.borderLight,
+              minWidth: 240,
+              alignItems: 'center',
+            }}
+          >
+            <Text style={{ color: theme.colors.text }}>
+              Long-press / right-click me
+            </Text>
+          </Pressable>
+        )}
+      </ContextMenu.Trigger>
+      <ContextMenu.Outer>
+        <ContextMenu.Group>
+          <ContextMenu.Item label="Open" onPress={() => {}}>
+            <ContextMenu.ItemText>Open</ContextMenu.ItemText>
+          </ContextMenu.Item>
+          <ContextMenu.Item label="Rename" onPress={() => {}}>
+            <ContextMenu.ItemText>Rename</ContextMenu.ItemText>
+          </ContextMenu.Item>
+          <ContextMenu.Item label="Delete" onPress={() => {}}>
+            <ContextMenu.ItemText>Delete</ContextMenu.ItemText>
+          </ContextMenu.Item>
+        </ContextMenu.Group>
+      </ContextMenu.Outer>
+    </ContextMenu.Root>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <TriggerSurface />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <TriggerSurface />
+      <TriggerSurface />
+    </View>
+  ),
+};

package/src/dialog/Dialog.stories.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../button';
+import { Dialog } from './Dialog';
+import { useDialogControl } from './context';
+import { alert } from './alert';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Dialog',
+  component: Dialog,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+function DeclarativeDemo() {
+  const control = useDialogControl();
+  return (
+    <>
+      <Button onPress={() => control.open()}>Open dialog</Button>
+      <Dialog
+        control={control}
+        title="Sign out?"
+        description="You'll need to enter your password to sign in again."
+        actions={[
+          { label: 'Sign out', color: 'destructive' },
+          { label: 'Cancel', color: 'cancel' },
+        ]}
+      />
+    </>
+  );
+}
+
+function CustomChildrenDemo() {
+  const control = useDialogControl();
+  return (
+    <>
+      <Button onPress={() => control.open()}>Open custom dialog</Button>
+      <Dialog control={control} title="Custom body">
+        <View style={{ gap: 12 }}>
+          <Text>Render any JSX inside the dialog body.</Text>
+          <Button variant="secondary" onPress={() => control.close()}>
+            Done
+          </Button>
+        </View>
+      </Dialog>
+    </>
+  );
+}
+
+function AlertDemo() {
+  return (
+    <Button
+      onPress={() =>
+        alert('Delete project?', 'This action cannot be undone.', [
+          { text: 'Cancel', style: 'cancel' },
+          { text: 'Delete', style: 'destructive' },
+        ])
+      }
+    >
+      Trigger alert()
+    </Button>
+  );
+}
+
+function ThreeActionDemo() {
+  const control = useDialogControl();
+  return (
+    <>
+      <Button onPress={() => control.open()}>Three actions</Button>
+      <Dialog
+        control={control}
+        title="Save changes?"
+        description="You have unsaved changes."
+        actions={[
+          { label: 'Save', color: 'default' },
+          { label: 'Discard', color: 'destructive' },
+          { label: 'Cancel', color: 'cancel' },
+        ]}
+      />
+    </>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <DeclarativeDemo />,
+};
+
+export const CustomChildren: Story = {
+  render: () => <CustomChildrenDemo />,
+};
+
+export const AlertHelper: Story = {
+  render: () => <AlertDemo />,
+};
+
+export const ThreeAction: Story = {
+  render: () => <ThreeActionDemo />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <DeclarativeDemo />
+      <CustomChildrenDemo />
+      <AlertDemo />
+    </View>
+  ),
+};

package/src/fonts/FontLoader.tsx

@@ -1,10 +1,11 @@
 import React, { useRef } from 'react';
 // Reach for the web variant explicitly. The default `./apply-font-faces`
-// is a no-op stub that exists so Metro never sees the module-level
-// `.woff2` imports on native (Metro's default `assetExts` does not include
-// `.woff2`). This file (`FontLoader.tsx`) is only picked up by web
-// bundlers — Metro selects `FontLoader.native.tsx` on iOS/Android — so it
-// is safe to take a direct dependency on the web implementation here.
+// is a no-op stub on native — native loads its fonts via
+// `useFonts(FONT_ASSETS)` in `FontLoader.native.tsx` and has no use for
+// CSS `@font-face` injection. This file (`FontLoader.tsx`) is only picked
+// up by web bundlers — Metro selects `FontLoader.native.tsx` on iOS/Android
+// — so it is safe to take a direct dependency on the web implementation
+// here.
 import { applyFontFaces } from './apply-font-faces.web';
 
 export interface FontLoaderProps {

package/src/fonts/apply-font-faces.ts

@@ -2,10 +2,10 @@
 // is selected by bundlers via the package.json conditions. RN consumers
 // never need font-face injection — useFonts handles loading on native.
 //
-// This file MUST have zero `.woff2` imports. Metro parses module-level
-// imports at bundle time and would otherwise fail to resolve the `.woff2`
-// assets (not in Metro's default `assetExts`). See
-// `apply-font-faces.web.ts` for the real implementation.
+// The web variant does NOT pull in any `.woff2` files via asset imports —
+// it imports base64 data URLs from `font-data.web.ts`. This stub stays
+// here so the file split (`*.ts` vs `*.web.ts`) makes the platform
+// intent explicit and so the runtime API surface matches across platforms.
 export function applyFontFaces(): void {
   // intentionally empty
 }