@oxyhq/bloom 0.16.2 → 0.17.0

package/README.md

@@ -50,19 +50,21 @@ const theme = useTheme();
 
 4 modes: `light`, `dark`, `system`, `adaptive` (uses iOS/Android native dynamic colors when available).
 
-### Modal & feedback components: Dialog, BottomSheet, toast / alert
+### Overlay components: Dialog, BottomSheet, toast / alert
 
-Bloom ships three primitives for modal, sheet, and feedback presentation. Pick the one that matches your use case:
+Bloom ships **two** overlay surface components plus feedback helpers:
 
-| Component | Native | Web | Use when |
-|-----------|--------|-----|----------|
-| `Dialog` | Bottom-sheet card (Bloom's own) | Centered modal | Confirmation flows AND custom modal content — same component handles both |
-| `BottomSheet` | Draggable sheet | RN `Modal` polyfill | You need direct control over snap points, scroll handoff, keyboard, detached/flush layout |
-| `toast` / `alert` | Sonner-native + Bloom theme | Sonner + Bloom theme | Passive feedback (`toast`) or one-shot confirmations (`alert`) called imperatively from anywhere |
+| Component | Use when |
+|-----------|----------|
+| `Dialog` | All modal surfaces — centered card, side-sheet (left/right), or bottom-sheet — via the `placement` prop. Confirmation flows AND custom content. |
+| `BottomSheet` | You need direct control over snap points, scroll handoff, gesture coordination, or detached presentation. |
+| `toast` / `alert` | Passive feedback (`toast`) or one-shot confirmations (`alert`) called imperatively from anywhere. |
+
+> **Removed in 0.16.x:** `CenteredDialog` and `ResponsiveSheet` no longer exist. Migrate: `<CenteredDialog visible={v} onClose={c}>…</CenteredDialog>` → `<Dialog placement="center" open={v} onClose={c}>…</Dialog>`; `<ResponsiveSheet side="left" open={o} onClose={c}>…</ResponsiveSheet>` → `<Dialog placement={{ base:'bottom', md:'left' }} open={o} onClose={c}>…</Dialog>`.
 
 ### Dialog
 
-A single `<Dialog>` component for both confirmation flows AND custom modal content. Bottom-sheet card on native, centered modal on web.
+A single `<Dialog>` component for every overlay surface — centered modal, side-sheet, or bottom-sheet — selected by the `placement` prop. Same component and same props on every platform.
 
 > **Required providers (native).** Your app root **must** be wrapped with `GestureHandlerRootView` from `react-native-gesture-handler` for the bottom-sheet pan gestures to work.
 
@@ -83,7 +85,7 @@ export default function Root() {
 }
 ```
 
-`BloomDialogProvider` powers the imperative `alert()` helper (see below) — mount it once near the app root.
+`BloomDialogProvider` powers the imperative `alert()` helper — mount it once near the app root.
 
 #### Declarative (the 90% case)
 
@@ -110,12 +112,38 @@ function SignOutButton() {
 }
 ```
 
+#### Controlled open state
+
+```tsx
+<Dialog
+  placement="center"
+  open={isOpen}
+  onClose={() => setIsOpen(false)}
+  title="Confirm?"
+  actions={[{ label: 'OK', onPress: handleOk }, { label: 'Cancel', color: 'cancel' }]}
+/>
+```
+
+#### Side-sheet (drawer)
+
+```tsx
+// Fixed left side-sheet
+<Dialog placement="left" control={control} title="Filters">
+  <FilterPanel />
+</Dialog>
+
+// Responsive: bottom-sheet on mobile, left drawer on desktop
+<Dialog placement={{ base: 'bottom', md: 'left' }} control={control} title="Filters">
+  <FilterPanel />
+</Dialog>
+```
+
 #### Custom content
 
-Provide any JSX as `children`. Combine with `title` to keep a consistent header.
+Provide any JSX as `children`. Combine with `title` to keep a consistent header. Set `contentPadding={0}` when the children own their own insets.
 
 ```tsx
-<Dialog control={control} title="Pick a tag">
+<Dialog control={control} title="Pick a tag" contentPadding={0}>
   <YourCustomBody />
 </Dialog>
 ```
@@ -132,19 +160,29 @@ Drop the declarative props entirely — `children` owns every pixel.
 
 #### Props
 
-- `control` — from `useDialogControl()`.
+- `control?` — from `useDialogControl()`. Omit when using controlled `open` instead.
+- `open?` — controlled open state. When provided, wins over `control`.
+- `placement?` — `'center' | 'left' | 'right' | 'bottom'` or a responsive map `{ base; sm?; md?; lg?; xl? }`. Default: `'center'`. Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 px.
 - `title?: string` — header text.
 - `description?: string` — supporting copy rendered below the title.
-- `actions?: DialogAction[]` — confirmation buttons. Each action accepts:
-  - `label: string` — button text.
+- `actions?: DialogAction[]` — confirmation buttons. Each action:
+  - `label: string`
   - `color?: 'default' | 'cancel' | 'destructive'` — defaults to `'default'`.
   - `onPress?: (e) => void` — invoked after the dialog finishes closing.
   - `disabled?: boolean`
   - `shouldCloseOnPress?: boolean` — defaults to `true`. Set `false` while an async action is in flight.
   - `testID?: string`
 - `children?: React.ReactNode` — custom content rendered after the description.
-- `onClose?: () => void` — fires after the dialog has finished closing.
-- `style?` — applied to the dialog content container.
+- `onClose?: () => void` — fires after the dialog has finished closing. In controlled mode, the host must flip `open` to `false`.
+- `contentPadding?: number` — inner padding of the dialog body. Default `20`. Set `0` for custom children that own their own insets.
+- `width?: number` — side-sheet width (px). Default `460`.
+- `maxWidth?: number` — centered-card max width (px). Default `480`.
+- `maxHeightRatio?: number` — bottom-sheet height as a fraction of viewport height. Default `0.9`.
+- `inset?: { top?; bottom?; left?; right? }` — side-sheet inset (px) from the overlay container edges.
+- `showHandle?: boolean` — show drag handle in bottom-sheet mode. Default `true`.
+- `dismissOnBackdrop?: boolean` — tap backdrop to dismiss. Default `true`.
+- `panelStyle? / panelClassName?` — style/class for the panel surface.
+- `containerStyle? / containerClassName?` — style/class for the root overlay (e.g. rail offset, theme-var scope).
 - `label?: string` — accessibility label.
 - `testID?: string`
 

package/lib/commonjs/theme/index.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "useColorScopeStyle", {
     return _colorScope.useColorScopeStyle;
   }
 });
+Object.defineProperty(exports, "useNavigationTheme", {
+  enumerable: true,
+  get: function () {
+    return _useNavigationTheme.useNavigationTheme;
+  }
+});
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () {
@@ -121,6 +127,7 @@ var _BloomThemeProvider = require("./BloomThemeProvider.js");
 var _colorScope = require("./color-scope");
 var _buildTheme = require("./build-theme.js");
 var _useTheme = require("./use-theme.js");
+var _useNavigationTheme = require("./use-navigation-theme.js");
 var _colorPresets = require("./color-presets.js");
 var _presetVars = require("./preset-vars.js");
 var _applyDarkClass = require("./apply-dark-class.js");

package/lib/commonjs/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_BloomThemeProvider","require","_colorScope","_buildTheme","_useTheme","_colorPresets","_presetVars","_applyDarkClass","_setColorSchemeSafe","_initCssInterop","_persistence"],"sourceRoot":"../../../src","sources":["theme/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,mBAAA,GAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAGA,IAAAI,aAAA,GAAAJ,OAAA;AAOA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,eAAA,GAAAN,OAAA;AACA,IAAAO,mBAAA,GAAAP,OAAA;AACA,IAAAQ,eAAA,GAAAR,OAAA;AAEA,IAAAS,YAAA,GAAAT,OAAA","ignoreList":[]}
+{"version":3,"names":["_BloomThemeProvider","require","_colorScope","_buildTheme","_useTheme","_useNavigationTheme","_colorPresets","_presetVars","_applyDarkClass","_setColorSchemeSafe","_initCssInterop","_persistence"],"sourceRoot":"../../../src","sources":["theme/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,mBAAA,GAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AAIA,IAAAK,aAAA,GAAAL,OAAA;AAOA,IAAAM,WAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAP,OAAA;AACA,IAAAQ,mBAAA,GAAAR,OAAA;AACA,IAAAS,eAAA,GAAAT,OAAA;AAEA,IAAAU,YAAA,GAAAV,OAAA","ignoreList":[]}

package/lib/commonjs/theme/use-navigation-theme.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNavigationTheme = useNavigationTheme;
+var _react = require("react");
+var _useTheme = require("./use-theme.js");
+const NAV_FONTS = {
+  regular: {
+    fontFamily: 'System',
+    fontWeight: '400'
+  },
+  medium: {
+    fontFamily: 'System',
+    fontWeight: '500'
+  },
+  bold: {
+    fontFamily: 'System',
+    fontWeight: '700'
+  },
+  heavy: {
+    fontFamily: 'System',
+    fontWeight: '900'
+  }
+};
+
+/**
+ * Projects Bloom's resolved theme into a react-navigation `Theme` POJO for
+ * expo-router's <ThemeProvider>. Keeps Bloom the single source of truth for
+ * navigator chrome (Stack headers, screen backgrounds, modal) so it tracks
+ * the active color preset. Returns a structural object — no react-navigation
+ * import — so Bloom stays decoupled. Replaces the per-app copies in
+ * test-app-expo / inbox / accounts.
+ */
+function useNavigationTheme() {
+  const {
+    mode,
+    colors
+  } = (0, _useTheme.useTheme)();
+  return (0, _react.useMemo)(() => ({
+    dark: mode === 'dark',
+    colors: {
+      primary: colors.primary,
+      background: colors.background,
+      card: colors.card,
+      text: colors.text,
+      border: colors.border,
+      notification: colors.error
+    },
+    fonts: NAV_FONTS
+  }), [mode, colors]);
+}
+//# sourceMappingURL=use-navigation-theme.js.map

package/lib/commonjs/theme/use-navigation-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_useTheme","NAV_FONTS","regular","fontFamily","fontWeight","medium","bold","heavy","useNavigationTheme","mode","colors","useTheme","useMemo","dark","primary","background","card","text","border","notification","error","fonts"],"sourceRoot":"../../../src","sources":["theme/use-navigation-theme.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAyBA,MAAME,SAAmC,GAAG;EAC1CC,OAAO,EAAE;IAAEC,UAAU,EAAE,QAAQ;IAAEC,UAAU,EAAE;EAAM,CAAC;EACpDC,MAAM,EAAE;IAAEF,UAAU,EAAE,QAAQ;IAAEC,UAAU,EAAE;EAAM,CAAC;EACnDE,IAAI,EAAE;IAAEH,UAAU,EAAE,QAAQ;IAAEC,UAAU,EAAE;EAAM,CAAC;EACjDG,KAAK,EAAE;IAAEJ,UAAU,EAAE,QAAQ;IAAEC,UAAU,EAAE;EAAM;AACnD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,kBAAkBA,CAAA,EAAoB;EACpD,MAAM;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EACnC,OAAO,IAAAC,cAAO,EACZ,OAAO;IACLC,IAAI,EAAEJ,IAAI,KAAK,MAAM;IACrBC,MAAM,EAAE;MACNI,OAAO,EAAEJ,MAAM,CAACI,OAAO;MACvBC,UAAU,EAAEL,MAAM,CAACK,UAAU;MAC7BC,IAAI,EAAEN,MAAM,CAACM,IAAI;MACjBC,IAAI,EAAEP,MAAM,CAACO,IAAI;MACjBC,MAAM,EAAER,MAAM,CAACQ,MAAM;MACrBC,YAAY,EAAET,MAAM,CAACU;IACvB,CAAC;IACDC,KAAK,EAAEpB;EACT,CAAC,CAAC,EACF,CAACQ,IAAI,EAAEC,MAAM,CACf,CAAC;AACH","ignoreList":[]}

package/lib/module/theme/index.js

@@ -4,6 +4,7 @@ export { BloomThemeProvider } from "./BloomThemeProvider.js";
 export { BloomColorScope, useColorScopeStyle } from './color-scope';
 export { buildTheme, STATUS_COLORS } from "./build-theme.js";
 export { useTheme, useThemeColor, useBloomTheme } from "./use-theme.js";
+export { useNavigationTheme } from "./use-navigation-theme.js";
 export { APP_COLOR_NAMES, PREMIUM_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COLOR, hexToAppColorName } from "./color-presets.js";
 export { getPresetVars, applyPresetVarsToDocument } from "./preset-vars.js";
 export { applyDarkClass } from "./apply-dark-class.js";

package/lib/module/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["BloomThemeProvider","BloomColorScope","useColorScopeStyle","buildTheme","STATUS_COLORS","useTheme","useThemeColor","useBloomTheme","APP_COLOR_NAMES","PREMIUM_COLOR_NAMES","APP_COLOR_PRESETS","HEX_TO_APP_COLOR","hexToAppColorName","getPresetVars","applyPresetVarsToDocument","applyDarkClass","setColorSchemeSafe","initCssInteropDarkMode","webLocalStorage"],"sourceRoot":"../../../src","sources":["theme/index.ts"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,yBAAsB;AAKzD,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,eAAe;AAEnE,SAASC,UAAU,EAAEC,aAAa,QAAQ,kBAAe;AACzD,SAASC,QAAQ,EAAEC,aAAa,EAAEC,aAAa,QAAQ,gBAAa;AAGpE,SACEC,eAAe,EACfC,mBAAmB,EACnBC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,QACZ,oBAAiB;AACxB,SAASC,aAAa,EAAEC,yBAAyB,QAAQ,kBAAe;AACxE,SAASC,cAAc,QAAQ,uBAAoB;AACnD,SAASC,kBAAkB,QAAQ,4BAAyB;AAC5D,SAASC,sBAAsB,QAAQ,uBAAoB;AAE3D,SAASC,eAAe,QAAQ,kBAAe","ignoreList":[]}
+{"version":3,"names":["BloomThemeProvider","BloomColorScope","useColorScopeStyle","buildTheme","STATUS_COLORS","useTheme","useThemeColor","useBloomTheme","useNavigationTheme","APP_COLOR_NAMES","PREMIUM_COLOR_NAMES","APP_COLOR_PRESETS","HEX_TO_APP_COLOR","hexToAppColorName","getPresetVars","applyPresetVarsToDocument","applyDarkClass","setColorSchemeSafe","initCssInteropDarkMode","webLocalStorage"],"sourceRoot":"../../../src","sources":["theme/index.ts"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,yBAAsB;AAKzD,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,eAAe;AAEnE,SAASC,UAAU,EAAEC,aAAa,QAAQ,kBAAe;AACzD,SAASC,QAAQ,EAAEC,aAAa,EAAEC,aAAa,QAAQ,gBAAa;AACpE,SAASC,kBAAkB,QAAQ,2BAAwB;AAI3D,SACEC,eAAe,EACfC,mBAAmB,EACnBC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,QACZ,oBAAiB;AACxB,SAASC,aAAa,EAAEC,yBAAyB,QAAQ,kBAAe;AACxE,SAASC,cAAc,QAAQ,uBAAoB;AACnD,SAASC,kBAAkB,QAAQ,4BAAyB;AAC5D,SAASC,sBAAsB,QAAQ,uBAAoB;AAE3D,SAASC,eAAe,QAAQ,kBAAe","ignoreList":[]}

package/lib/module/theme/use-navigation-theme.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { useTheme } from "./use-theme.js";
+const NAV_FONTS = {
+  regular: {
+    fontFamily: 'System',
+    fontWeight: '400'
+  },
+  medium: {
+    fontFamily: 'System',
+    fontWeight: '500'
+  },
+  bold: {
+    fontFamily: 'System',
+    fontWeight: '700'
+  },
+  heavy: {
+    fontFamily: 'System',
+    fontWeight: '900'
+  }
+};
+
+/**
+ * Projects Bloom's resolved theme into a react-navigation `Theme` POJO for
+ * expo-router's <ThemeProvider>. Keeps Bloom the single source of truth for
+ * navigator chrome (Stack headers, screen backgrounds, modal) so it tracks
+ * the active color preset. Returns a structural object — no react-navigation
+ * import — so Bloom stays decoupled. Replaces the per-app copies in
+ * test-app-expo / inbox / accounts.
+ */
+export function useNavigationTheme() {
+  const {
+    mode,
+    colors
+  } = useTheme();
+  return useMemo(() => ({
+    dark: mode === 'dark',
+    colors: {
+      primary: colors.primary,
+      background: colors.background,
+      card: colors.card,
+      text: colors.text,
+      border: colors.border,
+      notification: colors.error
+    },
+    fonts: NAV_FONTS
+  }), [mode, colors]);
+}
+//# sourceMappingURL=use-navigation-theme.js.map

package/lib/module/theme/use-navigation-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useTheme","NAV_FONTS","regular","fontFamily","fontWeight","medium","bold","heavy","useNavigationTheme","mode","colors","dark","primary","background","card","text","border","notification","error","fonts"],"sourceRoot":"../../../src","sources":["theme/use-navigation-theme.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,QAAQ,QAAQ,gBAAa;AAyBtC,MAAMC,SAAmC,GAAG;EAC1CC,OAAO,EAAE;IAAEC,UAAU,EAAE,QAAQ;IAAEC,UAAU,EAAE;EAAM,CAAC;EACpDC,MAAM,EAAE;IAAEF,UAAU,EAAE,QAAQ;IAAEC,UAAU,EAAE;EAAM,CAAC;EACnDE,IAAI,EAAE;IAAEH,UAAU,EAAE,QAAQ;IAAEC,UAAU,EAAE;EAAM,CAAC;EACjDG,KAAK,EAAE;IAAEJ,UAAU,EAAE,QAAQ;IAAEC,UAAU,EAAE;EAAM;AACnD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,kBAAkBA,CAAA,EAAoB;EACpD,MAAM;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAGV,QAAQ,CAAC,CAAC;EACnC,OAAOD,OAAO,CACZ,OAAO;IACLY,IAAI,EAAEF,IAAI,KAAK,MAAM;IACrBC,MAAM,EAAE;MACNE,OAAO,EAAEF,MAAM,CAACE,OAAO;MACvBC,UAAU,EAAEH,MAAM,CAACG,UAAU;MAC7BC,IAAI,EAAEJ,MAAM,CAACI,IAAI;MACjBC,IAAI,EAAEL,MAAM,CAACK,IAAI;MACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;MACrBC,YAAY,EAAEP,MAAM,CAACQ;IACvB,CAAC;IACDC,KAAK,EAAElB;EACT,CAAC,CAAC,EACF,CAACQ,IAAI,EAAEC,MAAM,CACf,CAAC;AACH","ignoreList":[]}

package/lib/typescript/commonjs/theme/index.d.ts

@@ -4,6 +4,8 @@ export { BloomColorScope, useColorScopeStyle } from './color-scope';
 export type { BloomColorScopeProps } from './color-scope';
 export { buildTheme, STATUS_COLORS } from './build-theme';
 export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
+export { useNavigationTheme } from './use-navigation-theme';
+export type { NavigationTheme, NavigationThemeFont } from './use-navigation-theme';
 export type { Theme, ThemeColors, ThemeMode } from './types';
 export type { AppColorName, AppColorPreset, PresetTokens } from './color-presets';
 export { APP_COLOR_NAMES, PREMIUM_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COLOR, hexToAppColorName, } from './color-presets';

package/lib/typescript/commonjs/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACnF,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/lib/typescript/commonjs/theme/use-navigation-theme.d.ts

@@ -0,0 +1,31 @@
+export interface NavigationThemeFont {
+    fontFamily: string;
+    fontWeight: '400' | '500' | '700' | '900';
+}
+export interface NavigationTheme {
+    dark: boolean;
+    colors: {
+        primary: string;
+        background: string;
+        card: string;
+        text: string;
+        border: string;
+        notification: string;
+    };
+    fonts: {
+        regular: NavigationThemeFont;
+        medium: NavigationThemeFont;
+        bold: NavigationThemeFont;
+        heavy: NavigationThemeFont;
+    };
+}
+/**
+ * Projects Bloom's resolved theme into a react-navigation `Theme` POJO for
+ * expo-router's <ThemeProvider>. Keeps Bloom the single source of truth for
+ * navigator chrome (Stack headers, screen backgrounds, modal) so it tracks
+ * the active color preset. Returns a structural object — no react-navigation
+ * import — so Bloom stays decoupled. Replaces the per-app copies in
+ * test-app-expo / inbox / accounts.
+ */
+export declare function useNavigationTheme(): NavigationTheme;
+//# sourceMappingURL=use-navigation-theme.d.ts.map

package/lib/typescript/commonjs/theme/use-navigation-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-navigation-theme.d.ts","sourceRoot":"","sources":["../../../../src/theme/use-navigation-theme.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CAC3C;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,KAAK,EAAE;QACL,OAAO,EAAE,mBAAmB,CAAC;QAC7B,MAAM,EAAE,mBAAmB,CAAC;QAC5B,IAAI,EAAE,mBAAmB,CAAC;QAC1B,KAAK,EAAE,mBAAmB,CAAC;KAC5B,CAAC;CACH;AASD;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAiBpD"}

package/lib/typescript/module/theme/index.d.ts

@@ -4,6 +4,8 @@ export { BloomColorScope, useColorScopeStyle } from './color-scope';
 export type { BloomColorScopeProps } from './color-scope';
 export { buildTheme, STATUS_COLORS } from './build-theme';
 export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
+export { useNavigationTheme } from './use-navigation-theme';
+export type { NavigationTheme, NavigationThemeFont } from './use-navigation-theme';
 export type { Theme, ThemeColors, ThemeMode } from './types';
 export type { AppColorName, AppColorPreset, PresetTokens } from './color-presets';
 export { APP_COLOR_NAMES, PREMIUM_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COLOR, hexToAppColorName, } from './color-presets';

package/lib/typescript/module/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACnF,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/lib/typescript/module/theme/use-navigation-theme.d.ts

@@ -0,0 +1,31 @@
+export interface NavigationThemeFont {
+    fontFamily: string;
+    fontWeight: '400' | '500' | '700' | '900';
+}
+export interface NavigationTheme {
+    dark: boolean;
+    colors: {
+        primary: string;
+        background: string;
+        card: string;
+        text: string;
+        border: string;
+        notification: string;
+    };
+    fonts: {
+        regular: NavigationThemeFont;
+        medium: NavigationThemeFont;
+        bold: NavigationThemeFont;
+        heavy: NavigationThemeFont;
+    };
+}
+/**
+ * Projects Bloom's resolved theme into a react-navigation `Theme` POJO for
+ * expo-router's <ThemeProvider>. Keeps Bloom the single source of truth for
+ * navigator chrome (Stack headers, screen backgrounds, modal) so it tracks
+ * the active color preset. Returns a structural object — no react-navigation
+ * import — so Bloom stays decoupled. Replaces the per-app copies in
+ * test-app-expo / inbox / accounts.
+ */
+export declare function useNavigationTheme(): NavigationTheme;
+//# sourceMappingURL=use-navigation-theme.d.ts.map

package/lib/typescript/module/theme/use-navigation-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-navigation-theme.d.ts","sourceRoot":"","sources":["../../../../src/theme/use-navigation-theme.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CAC3C;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,KAAK,EAAE;QACL,OAAO,EAAE,mBAAmB,CAAC;QAC7B,MAAM,EAAE,mBAAmB,CAAC;QAC5B,IAAI,EAAE,mBAAmB,CAAC;QAC1B,KAAK,EAAE,mBAAmB,CAAC;KAC5B,CAAC;CACH;AASD;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAiBpD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.16.2",
+  "version": "0.17.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/public-api-contract.test.ts

@@ -0,0 +1,42 @@
+import * as Bloom from '../index';
+
+type AnyExports = Record<string, unknown>;
+const api = Bloom as AnyExports;
+
+// The ONLY families allowed to remain namespace objects (collections /
+// generic-colliding part names). Everything else is flat-with-prefix.
+const ALLOWED_NAMESPACES = ['Icons', 'Typography', 'Skeleton', 'Grid', 'Code', 'Fonts'] as const;
+
+// Compound families converted to flat: their top-level name becomes the
+// root component (a function), no longer a namespace object.
+const FLATTENED_ROOTS = [
+  'Tabs', 'Accordion', 'Select', 'Menu', 'ContextMenu', 'Popover',
+  'Tooltip', 'SegmentedControl', 'TextField', 'Admonition', 'PromptInput',
+] as const;
+
+// One renamed part per converted family — proves the flat rename landed.
+const REPRESENTATIVE_PARTS = [
+  'TabsTrigger', 'AccordionItem', 'SelectItem', 'MenuItem', 'ContextMenuItem',
+  'PopoverTrigger', 'TooltipTrigger', 'SegmentedControlItem', 'TextFieldInput',
+  'AdmonitionIcon', 'PromptInputTextarea',
+] as const;
+
+describe('public API contract', () => {
+  it('keeps the six collection families as namespace objects', () => {
+    for (const ns of ALLOWED_NAMESPACES) {
+      expect(typeof api[ns]).toBe('object');
+    }
+  });
+
+  it('exposes each compound family root as a flat component (not a namespace)', () => {
+    for (const name of FLATTENED_ROOTS) {
+      expect(typeof api[name]).toBe('function');
+    }
+  });
+
+  it('exposes compound parts as flat prefixed components', () => {
+    for (const name of REPRESENTATIVE_PARTS) {
+      expect(typeof api[name]).toBe('function');
+    }
+  });
+});

package/src/theme/index.ts

@@ -7,6 +7,8 @@ export { BloomColorScope, useColorScopeStyle } from './color-scope';
 export type { BloomColorScopeProps } from './color-scope';
 export { buildTheme, STATUS_COLORS } from './build-theme';
 export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
+export { useNavigationTheme } from './use-navigation-theme';
+export type { NavigationTheme, NavigationThemeFont } from './use-navigation-theme';
 export type { Theme, ThemeColors, ThemeMode } from './types';
 export type { AppColorName, AppColorPreset, PresetTokens } from './color-presets';
 export {

package/src/theme/use-navigation-theme.ts

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { useTheme } from './use-theme';
+
+export interface NavigationThemeFont {
+  fontFamily: string;
+  fontWeight: '400' | '500' | '700' | '900';
+}
+
+export interface NavigationTheme {
+  dark: boolean;
+  colors: {
+    primary: string;
+    background: string;
+    card: string;
+    text: string;
+    border: string;
+    notification: string;
+  };
+  fonts: {
+    regular: NavigationThemeFont;
+    medium: NavigationThemeFont;
+    bold: NavigationThemeFont;
+    heavy: NavigationThemeFont;
+  };
+}
+
+const NAV_FONTS: NavigationTheme['fonts'] = {
+  regular: { fontFamily: 'System', fontWeight: '400' },
+  medium: { fontFamily: 'System', fontWeight: '500' },
+  bold: { fontFamily: 'System', fontWeight: '700' },
+  heavy: { fontFamily: 'System', fontWeight: '900' },
+};
+
+/**
+ * Projects Bloom's resolved theme into a react-navigation `Theme` POJO for
+ * expo-router's <ThemeProvider>. Keeps Bloom the single source of truth for
+ * navigator chrome (Stack headers, screen backgrounds, modal) so it tracks
+ * the active color preset. Returns a structural object — no react-navigation
+ * import — so Bloom stays decoupled. Replaces the per-app copies in
+ * test-app-expo / inbox / accounts.
+ */
+export function useNavigationTheme(): NavigationTheme {
+  const { mode, colors } = useTheme();
+  return useMemo(
+    () => ({
+      dark: mode === 'dark',
+      colors: {
+        primary: colors.primary,
+        background: colors.background,
+        card: colors.card,
+        text: colors.text,
+        border: colors.border,
+        notification: colors.error,
+      },
+      fonts: NAV_FONTS,
+    }),
+    [mode, colors],
+  );
+}