@oxyhq/bloom 0.17.0 → 0.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.17.0",
+  "version": "0.18.1",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -880,12 +880,6 @@
     "react-dom": {
       "optional": true
     },
-    "react-native-reanimated": {
-      "optional": true
-    },
-    "react-native-gesture-handler": {
-      "optional": true
-    },
     "react-native-svg": {
       "optional": true
     },

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

@@ -3,12 +3,10 @@ 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.
+// Collections / generic-colliding part names that intentionally STAY namespaced.
 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.
+// Compound families converted to flat: the top-level name is the root component.
 const FLATTENED_ROOTS = [
   'Tabs', 'Accordion', 'Select', 'Menu', 'ContextMenu', 'Popover',
   'Tooltip', 'SegmentedControl', 'TextField', 'Admonition', 'PromptInput',
@@ -21,22 +19,36 @@ const REPRESENTATIVE_PARTS = [
   'AdmonitionIcon', 'PromptInputTextarea',
 ] as const;
 
+/**
+ * A flat React component export is either a plain function component or a wrapped
+ * component object (React.memo / forwardRef), which carries a `$$typeof` symbol.
+ * A `export * as X` namespace is a plain object WITHOUT `$$typeof`.
+ */
+function isReactComponent(value: unknown): boolean {
+  if (typeof value === 'function') return true;
+  if (typeof value === 'object' && value !== null) {
+    return typeof (value as { $$typeof?: unknown }).$$typeof === 'symbol';
+  }
+  return false;
+}
+
 describe('public API contract', () => {
-  it('keeps the six collection families as namespace objects', () => {
+  it('keeps the six collection families as namespace objects (not components)', () => {
     for (const ns of ALLOWED_NAMESPACES) {
       expect(typeof api[ns]).toBe('object');
+      expect(isReactComponent(api[ns])).toBe(false);
     }
   });
 
   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');
+      expect(isReactComponent(api[name])).toBe(true);
     }
   });
 
   it('exposes compound parts as flat prefixed components', () => {
     for (const name of REPRESENTATIVE_PARTS) {
-      expect(typeof api[name]).toBe('function');
+      expect(isReactComponent(api[name])).toBe(true);
     }
   });
 });

package/src/__tests__/useNavigationTheme.test.tsx

@@ -0,0 +1,227 @@
+import React, { useRef } from 'react';
+import { Text, View } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+let mockColorScheme: 'light' | 'dark' | null = 'light';
+
+jest.mock('react-native', () => {
+  const actual = jest.requireActual('react-native');
+  return {
+    ...actual,
+    useColorScheme: () => mockColorScheme,
+    Appearance: {
+      ...actual.Appearance,
+      setColorScheme: jest.fn(),
+      getColorScheme: () => mockColorScheme,
+    },
+  };
+});
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { useTheme } from '../theme/use-theme';
+import { useNavigationTheme } from '../theme/use-navigation-theme';
+import type { NavigationTheme } from '../theme/use-navigation-theme';
+
+// Probe that captures both the navigation theme and the raw bloom theme
+// into external refs so tests can inspect them after render.
+function Probe({
+  navRef,
+  bloomRef,
+}: {
+  navRef: React.MutableRefObject<NavigationTheme | null>;
+  bloomRef: React.MutableRefObject<ReturnType<typeof useTheme> | null>;
+}) {
+  const nav = useNavigationTheme();
+  const bloom = useTheme();
+  navRef.current = nav;
+  bloomRef.current = bloom;
+  return (
+    <View>
+      <Text testID="dark">{String(nav.dark)}</Text>
+      <Text testID="primary">{nav.colors.primary}</Text>
+      <Text testID="notification">{nav.colors.notification}</Text>
+    </View>
+  );
+}
+
+// Probe that captures the navigation theme reference twice across renders,
+// storing it in an array so the test can assert referential stability.
+function MemoProbe({
+  capturesRef,
+  triggerProp,
+}: {
+  capturesRef: React.MutableRefObject<NavigationTheme[]>;
+  triggerProp: number;
+}) {
+  void triggerProp; // read the prop so React re-renders when it changes
+  const nav = useNavigationTheme();
+  capturesRef.current.push(nav);
+  return null;
+}
+
+beforeEach(() => {
+  mockColorScheme = 'light';
+});
+
+describe('useNavigationTheme', () => {
+  describe('dark flag', () => {
+    it('returns dark=false under explicit light mode', () => {
+      const navRef = { current: null as NavigationTheme | null };
+      const bloomRef = { current: null as ReturnType<typeof useTheme> | null };
+      render(
+        <BloomThemeProvider mode="light">
+          <Probe navRef={navRef} bloomRef={bloomRef} />
+        </BloomThemeProvider>,
+      );
+      expect(navRef.current?.dark).toBe(false);
+    });
+
+    it('returns dark=true under explicit dark mode', () => {
+      const navRef = { current: null as NavigationTheme | null };
+      const bloomRef = { current: null as ReturnType<typeof useTheme> | null };
+      render(
+        <BloomThemeProvider mode="dark">
+          <Probe navRef={navRef} bloomRef={bloomRef} />
+        </BloomThemeProvider>,
+      );
+      expect(navRef.current?.dark).toBe(true);
+    });
+
+    it('returns dark=false when system mode resolves to light', () => {
+      mockColorScheme = 'light';
+      const navRef = { current: null as NavigationTheme | null };
+      const bloomRef = { current: null as ReturnType<typeof useTheme> | null };
+      render(
+        <BloomThemeProvider mode="system">
+          <Probe navRef={navRef} bloomRef={bloomRef} />
+        </BloomThemeProvider>,
+      );
+      expect(navRef.current?.dark).toBe(false);
+    });
+
+    it('returns dark=true when system mode resolves to dark', () => {
+      mockColorScheme = 'dark';
+      const navRef = { current: null as NavigationTheme | null };
+      const bloomRef = { current: null as ReturnType<typeof useTheme> | null };
+      render(
+        <BloomThemeProvider mode="system">
+          <Probe navRef={navRef} bloomRef={bloomRef} />
+        </BloomThemeProvider>,
+      );
+      expect(navRef.current?.dark).toBe(true);
+    });
+  });
+
+  describe('color mapping', () => {
+    it('maps primary/background/card/text/border 1:1 from useTheme().colors', () => {
+      const navRef = { current: null as NavigationTheme | null };
+      const bloomRef = { current: null as ReturnType<typeof useTheme> | null };
+      render(
+        <BloomThemeProvider mode="light" colorPreset="blue">
+          <Probe navRef={navRef} bloomRef={bloomRef} />
+        </BloomThemeProvider>,
+      );
+      const nav = navRef.current;
+      const bloom = bloomRef.current;
+      expect(nav).not.toBeNull();
+      expect(bloom).not.toBeNull();
+      expect(nav!.colors.primary).toBe(bloom!.colors.primary);
+      expect(nav!.colors.background).toBe(bloom!.colors.background);
+      expect(nav!.colors.card).toBe(bloom!.colors.card);
+      expect(nav!.colors.text).toBe(bloom!.colors.text);
+      expect(nav!.colors.border).toBe(bloom!.colors.border);
+    });
+
+    it('maps notification to colors.error (not a direct key)', () => {
+      const navRef = { current: null as NavigationTheme | null };
+      const bloomRef = { current: null as ReturnType<typeof useTheme> | null };
+      render(
+        <BloomThemeProvider mode="light" colorPreset="blue">
+          <Probe navRef={navRef} bloomRef={bloomRef} />
+        </BloomThemeProvider>,
+      );
+      expect(navRef.current!.colors.notification).toBe(
+        bloomRef.current!.colors.error,
+      );
+    });
+
+    it('colors differ between light and dark presets (sanity check)', () => {
+      const lightNavRef = { current: null as NavigationTheme | null };
+      const lightBloomRef = { current: null as ReturnType<typeof useTheme> | null };
+      const { unmount } = render(
+        <BloomThemeProvider mode="light" colorPreset="teal">
+          <Probe navRef={lightNavRef} bloomRef={lightBloomRef} />
+        </BloomThemeProvider>,
+      );
+      const lightBg = lightNavRef.current!.colors.background;
+      unmount();
+
+      const darkNavRef = { current: null as NavigationTheme | null };
+      const darkBloomRef = { current: null as ReturnType<typeof useTheme> | null };
+      render(
+        <BloomThemeProvider mode="dark" colorPreset="teal">
+          <Probe navRef={darkNavRef} bloomRef={darkBloomRef} />
+        </BloomThemeProvider>,
+      );
+      const darkBg = darkNavRef.current!.colors.background;
+
+      expect(lightBg).not.toBe(darkBg);
+    });
+  });
+
+  describe('fonts shape', () => {
+    it('has all four font variants with System fontFamily', () => {
+      const navRef = { current: null as NavigationTheme | null };
+      const bloomRef = { current: null as ReturnType<typeof useTheme> | null };
+      render(
+        <BloomThemeProvider mode="light">
+          <Probe navRef={navRef} bloomRef={bloomRef} />
+        </BloomThemeProvider>,
+      );
+      const fonts = navRef.current!.fonts;
+      for (const key of ['regular', 'medium', 'bold', 'heavy'] as const) {
+        expect(fonts[key].fontFamily).toBe('System');
+      }
+    });
+
+    it('has correct fontWeight values for each variant', () => {
+      const navRef = { current: null as NavigationTheme | null };
+      const bloomRef = { current: null as ReturnType<typeof useTheme> | null };
+      render(
+        <BloomThemeProvider mode="light">
+          <Probe navRef={navRef} bloomRef={bloomRef} />
+        </BloomThemeProvider>,
+      );
+      const fonts = navRef.current!.fonts;
+      expect(fonts.regular.fontWeight).toBe('400');
+      expect(fonts.medium.fontWeight).toBe('500');
+      expect(fonts.bold.fontWeight).toBe('700');
+      expect(fonts.heavy.fontWeight).toBe('900');
+    });
+  });
+
+  describe('memo stability', () => {
+    it('returns a referentially-equal object on re-render when theme is unchanged', () => {
+      const capturesRef: React.MutableRefObject<NavigationTheme[]> = {
+        current: [],
+      };
+      const { rerender } = render(
+        <BloomThemeProvider mode="light">
+          <MemoProbe capturesRef={capturesRef} triggerProp={0} />
+        </BloomThemeProvider>,
+      );
+
+      // Re-render without changing mode or colorPreset — memo should hold.
+      rerender(
+        <BloomThemeProvider mode="light">
+          <MemoProbe capturesRef={capturesRef} triggerProp={1} />
+        </BloomThemeProvider>,
+      );
+
+      expect(capturesRef.current.length).toBeGreaterThanOrEqual(2);
+      const first = capturesRef.current[0];
+      const second = capturesRef.current[1];
+      expect(Object.is(first, second)).toBe(true);
+    });
+  });
+});

package/src/admonition/index.tsx

@@ -28,7 +28,7 @@ const ICON_MAP = {
   apology: EmojiSadIcon,
 } as const;
 
-export function Icon() {
+export function AdmonitionIcon() {
   const theme = useTheme();
   const { type } = useContext(AdmonitionContext);
 
@@ -44,9 +44,9 @@ export function Icon() {
 
   return <IconComponent fill={fillMap[type]} size="md" />;
 }
-Icon.displayName = 'Admonition.Icon';
+AdmonitionIcon.displayName = 'AdmonitionIcon';
 
-export function Content({
+export function AdmonitionContent({
   children,
   style,
 }: {
@@ -59,9 +59,9 @@ export function Content({
     </View>
   );
 }
-Content.displayName = 'Admonition.Content';
+AdmonitionContent.displayName = 'AdmonitionContent';
 
-export function Text({
+export function AdmonitionText({
   children,
   style,
 }: {
@@ -74,9 +74,9 @@ export function Text({
     </BaseText>
   );
 }
-Text.displayName = 'Admonition.Text';
+AdmonitionText.displayName = 'AdmonitionText';
 
-export function Button({
+export function AdmonitionButton({
   children,
   ...props
 }: Omit<ButtonProps, 'size' | 'variant'>) {
@@ -86,9 +86,9 @@ export function Button({
     </BaseButton>
   );
 }
-Button.displayName = 'Admonition.Button';
+AdmonitionButton.displayName = 'AdmonitionButton';
 
-export function Row({
+export function AdmonitionRow({
   children,
   style,
 }: {
@@ -101,9 +101,9 @@ export function Row({
     </View>
   );
 }
-Row.displayName = 'Admonition.Row';
+AdmonitionRow.displayName = 'AdmonitionRow';
 
-export function Outer({
+export function AdmonitionRoot({
   children,
   type = 'info',
   style,
@@ -139,11 +139,12 @@ export function Outer({
     </AdmonitionContext.Provider>
   );
 }
-Outer.displayName = 'Admonition.Outer';
+AdmonitionRoot.displayName = 'AdmonitionRoot';
 
 /**
  * Simple all-in-one Admonition component for common use cases.
- * For more control, compose with Outer, Row, Icon, Content, Text, and Button.
+ * For more control, compose with AdmonitionRoot, AdmonitionRow, AdmonitionIcon,
+ * AdmonitionContent, AdmonitionText, and AdmonitionButton.
  */
 export function Admonition({
   children,
@@ -155,14 +156,14 @@ export function Admonition({
   style?: StyleProp<ViewStyle>;
 }) {
   return (
-    <Outer type={type} style={style}>
-      <Row>
-        <Icon />
-        <Content>
-          <Text>{children}</Text>
-        </Content>
-      </Row>
-    </Outer>
+    <AdmonitionRoot type={type} style={style}>
+      <AdmonitionRow>
+        <AdmonitionIcon />
+        <AdmonitionContent>
+          <AdmonitionText>{children}</AdmonitionText>
+        </AdmonitionContent>
+      </AdmonitionRow>
+    </AdmonitionRoot>
   );
 }
 Admonition.displayName = 'Admonition';

package/src/combobox/Combobox.tsx

@@ -20,7 +20,7 @@ import {
 import { Check_Stroke2_Corner0_Rounded as CheckIcon } from '../icons/Check';
 import type {
   PopoverContentProps,
-  PopoverRootProps,
+  PopoverProps,
   PopoverTriggerProps,
 } from '../popover/types';
 import type { usePopoverContext as usePopoverContextType } from '../popover/context';
@@ -29,13 +29,13 @@ import type { ComboboxOption, ComboboxProps } from './types';
 /**
  * Structural shape of the `Popover` module, satisfied by both the native and
  * web platform forks. Defined explicitly (rather than `typeof import(...)`) so
- * the slightly different render-return types between forks (web `Content` may
- * return `null`) don't make the modules mutually unassignable.
+ * the slightly different render-return types between forks (web `PopoverContent`
+ * may return `null`) don't make the modules mutually unassignable.
  */
 interface PopoverModule {
-  Root: (props: PopoverRootProps) => React.ReactElement;
-  Trigger: (props: PopoverTriggerProps) => React.ReactElement;
-  Content: (props: PopoverContentProps) => React.ReactElement | null;
+  Popover: (props: PopoverProps) => React.ReactElement;
+  PopoverTrigger: (props: PopoverTriggerProps) => React.ReactElement;
+  PopoverContent: (props: PopoverContentProps) => React.ReactElement | null;
   usePopoverContext: typeof usePopoverContextType;
 }
 
@@ -59,7 +59,7 @@ function defaultFilter<T>(option: ComboboxOption<T>, query: string): boolean {
  * read the overlay control from `Popover` context (via an inner component) so
  * selecting an option reliably closes the overlay on every platform.
  */
-export function createCombobox(Popover: PopoverModule) {
+export function createCombobox(PopoverImpl: PopoverModule) {
   function ComboboxInner<T>({
     options,
     value,
@@ -80,7 +80,7 @@ export function createCombobox(Popover: PopoverModule) {
   > &
     Pick<ComboboxProps<T>, 'label' | 'query' | 'onQueryChange' | 'disabled'>) {
     const theme = useTheme();
-    const { control } = Popover.usePopoverContext();
+    const { control } = PopoverImpl.usePopoverContext();
     const searchRef = useRef<TextInput>(null);
 
     const [query, setQuery] = useControllableState<string>({
@@ -113,7 +113,7 @@ export function createCombobox(Popover: PopoverModule) {
 
     return (
       <>
-        <Popover.Trigger label={accessibleLabel}>
+        <PopoverImpl.PopoverTrigger label={accessibleLabel}>
           {({ props }) => (
             <Pressable
               {...props}
@@ -149,9 +149,9 @@ export function createCombobox(Popover: PopoverModule) {
               <ChevronUpDownIcon size="xs" fill={theme.colors.textSecondary} />
             </Pressable>
           )}
-        </Popover.Trigger>
+        </PopoverImpl.PopoverTrigger>
 
-        <Popover.Content label={accessibleLabel} placement="bottom-start" minWidth={240}>
+        <PopoverImpl.PopoverContent label={accessibleLabel} placement="bottom-start" minWidth={240}>
           <View style={styles.searchWrap}>
             <SearchInput
               ref={searchRef}
@@ -196,7 +196,7 @@ export function createCombobox(Popover: PopoverModule) {
               })}
             </ScrollView>
           )}
-        </Popover.Content>
+        </PopoverImpl.PopoverContent>
       </>
     );
   }
@@ -217,7 +217,7 @@ export function createCombobox(Popover: PopoverModule) {
     testID,
   }: ComboboxProps<T>) {
     return (
-      <Popover.Root>
+      <PopoverImpl.Popover>
         <View style={style} testID={testID}>
           <ComboboxInner<T>
             options={options}
@@ -233,7 +233,7 @@ export function createCombobox(Popover: PopoverModule) {
             maxListHeight={maxListHeight}
           />
         </View>
-      </Popover.Root>
+      </PopoverImpl.Popover>
     );
   }
 

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

@@ -3,7 +3,15 @@ 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';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuDivider,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuItemText,
+  ContextMenuTrigger,
+} from './index';
 
 const meta: Meta = {
   title: 'Components/ContextMenu',
@@ -16,8 +24,8 @@ type Story = StoryObj;
 function TriggerSurface() {
   const theme = useTheme();
   return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger label="Long-press for actions">
+    <ContextMenu>
+      <ContextMenuTrigger label="Long-press for actions">
         {({ props }) => (
           <Pressable
             onPress={() => props.onPress?.()}
@@ -39,21 +47,21 @@ function TriggerSurface() {
             </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>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem label="Open" onPress={() => {}}>
+            <ContextMenuItemText>Open</ContextMenuItemText>
+          </ContextMenuItem>
+          <ContextMenuItem label="Rename" onPress={() => {}}>
+            <ContextMenuItemText>Rename</ContextMenuItemText>
+          </ContextMenuItem>
+          <ContextMenuItem label="Delete" onPress={() => {}}>
+            <ContextMenuItemText>Delete</ContextMenuItemText>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
   );
 }
 

package/src/context-menu/context.ts

@@ -21,7 +21,7 @@ export function useContextMenuContext(): ContextMenuContextValue {
   const ctx = useContext(ContextMenuContext);
   if (!ctx) {
     throw new Error(
-      'ContextMenu components must be used within a ContextMenu.Root',
+      'ContextMenu components must be used within a <ContextMenu>',
     );
   }
   return ctx;
@@ -38,7 +38,7 @@ export function useItemContext(): ItemContextValue {
   const ctx = useContext(ItemCtx);
   if (!ctx) {
     throw new Error(
-      'ContextMenu.ItemText/ItemIcon must be used within a ContextMenu.Item',
+      'ContextMenuItemText/ContextMenuItemIcon must be used within a <ContextMenuItem>',
     );
   }
   return ctx;