@oxyhq/bloom 0.16.2 → 0.18.0

package/src/tabs/types.ts

@@ -9,13 +9,13 @@ export interface TabsProps {
   onValueChange: (value: string) => void;
   /** Visual variant for the tab bar. */
   variant?: TabsVariant;
-  /** The tab items. Must be Tab components. */
+  /** The tab items. Must be TabsTrigger components. */
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
 
-export interface TabProps {
+export interface TabsTriggerProps {
   /** Unique value identifying this tab. */
   value: string;
   /** Tab label text. */
@@ -28,7 +28,7 @@ export interface TabProps {
   textStyle?: StyleProp<TextStyle>;
 }
 
-export interface TabPanelProps {
+export interface TabsContentProps {
   /** The tab value this panel corresponds to. */
   value: string;
   /** Panel content. */

package/src/text-field/TextField.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { View } from 'react-native';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import * as TextField from './index';
+import { TextField, TextFieldInput, TextFieldLabel } from './index';
 
 const meta: Meta = {
   title: 'Components/TextField',
@@ -28,9 +28,9 @@ function ControlledField({
   const [value, setValue] = useState(initial);
   return (
     <View style={{ width: 320 }}>
-      <TextField.LabelText>{label}</TextField.LabelText>
-      <TextField.Root isInvalid={isInvalid}>
-        <TextField.Input
+      <TextFieldLabel>{label}</TextFieldLabel>
+      <TextField isInvalid={isInvalid}>
+        <TextFieldInput
           label={label}
           placeholder={placeholder}
           value={value}
@@ -38,7 +38,7 @@ function ControlledField({
           editable={editable}
           isInvalid={isInvalid}
         />
-      </TextField.Root>
+      </TextField>
     </View>
   );
 }

package/src/text-field/index.tsx

@@ -46,11 +46,11 @@ const Context = createContext<{
 });
 Context.displayName = 'TextFieldContext';
 
-export type RootProps = React.PropsWithChildren<
+export type TextFieldProps = React.PropsWithChildren<
   { isInvalid?: boolean } & ViewStyleProp
 >;
 
-export function Root({ children, isInvalid = false, style }: RootProps) {
+export function TextField({ children, isInvalid = false, style }: TextFieldProps) {
   const inputRef = useRef<TextInput>(null);
   const {
     state: hovered,
@@ -122,7 +122,7 @@ export function useSharedInputStyles() {
   }, [theme]);
 }
 
-export type InputProps = Omit<
+export type TextFieldInputProps = Omit<
   TextInputProps,
   'value' | 'onChangeText' | 'placeholder'
 > & {
@@ -134,7 +134,7 @@ export type InputProps = Omit<
   placeholder?: string | null | undefined;
 };
 
-export function Input({
+export function TextFieldInput({
   label,
   placeholder,
   value,
@@ -145,7 +145,7 @@ export function Input({
   inputRef,
   style,
   ...rest
-}: InputProps) {
+}: TextFieldInputProps) {
   const theme = useTheme();
   const ctx = useContext(Context);
   const withinRoot = Boolean(ctx.inputRef);
@@ -155,8 +155,8 @@ export function Input({
 
   if (!withinRoot) {
     return (
-      <Root isInvalid={isInvalid}>
-        <Input
+      <TextField isInvalid={isInvalid}>
+        <TextFieldInput
           label={label}
           placeholder={placeholder}
           value={value}
@@ -164,7 +164,7 @@ export function Input({
           isInvalid={isInvalid}
           {...rest}
         />
-      </Root>
+      </TextField>
     );
   }
 
@@ -246,7 +246,7 @@ export function Input({
   );
 }
 
-export function LabelText({
+export function TextFieldLabel({
   nativeID,
   children,
 }: React.PropsWithChildren<{ nativeID?: string }>) {
@@ -265,7 +265,7 @@ export function LabelText({
   );
 }
 
-export function Icon({ icon: Comp }: { icon: React.ComponentType<SVGIconProps> }) {
+export function TextFieldIcon({ icon: Comp }: { icon: React.ComponentType<SVGIconProps> }) {
   const theme = useTheme();
   const ctx = useContext(Context);
 
@@ -297,7 +297,7 @@ export function Icon({ icon: Comp }: { icon: React.ComponentType<SVGIconProps> }
   );
 }
 
-export function SuffixText({
+export function TextFieldSuffix({
   children,
   label,
   accessibilityHint,
@@ -330,7 +330,7 @@ export function SuffixText({
   );
 }
 
-export function GhostText({
+export function TextFieldGhost({
   children,
   value,
 }: {

package/src/theme/color-scope/style-builder.ts

@@ -76,12 +76,12 @@ export function getVariableContextProvider(): VariableContextProviderComponent |
  * provider writes vars to `documentElement` instead) or when `nativewind` is
  * not installed.
  *
- * @deprecated Under react-native-css@3, `vars()` only propagates to a subtree
- * when applied to an interop className component (the runtime gates propagation
- * on matched className style rules). Applied to a plain `<View>` the vars are
- * dropped silently. Prefer wrapping children in `getVariableContextProvider()`.
- * Retained only as the escape-hatch contract of `useColorScopeStyle`, where the
- * caller owns the host element and is expected to be a className component.
+ * Caveat — prefer `getVariableContextProvider()`: under react-native-css@3,
+ * `vars()` only propagates to a subtree when applied to an interop className
+ * component (the runtime gates propagation on matched className style rules).
+ * Applied to a plain `<View>` the vars are dropped silently. This is retained
+ * as the escape-hatch contract of `useColorScopeStyle`, where the caller owns
+ * the host element and is expected to be a className component.
  */
 export function buildNativePresetStyle(
   colorPreset: AppColorName,

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],
+  );
+}

package/src/tooltip/index.tsx

@@ -72,16 +72,16 @@ TargetContext.displayName = 'TargetContext';
  *
  * Only really necessary on iOS but can work on Android.
  */
-export function SheetCompatProvider({
+export function TooltipSheetCompatProvider({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return <>{children}</>;
 }
-SheetCompatProvider.displayName = 'TooltipSheetCompatProvider';
+TooltipSheetCompatProvider.displayName = 'TooltipSheetCompatProvider';
 
-export function Outer({
+export function Tooltip({
   children,
   position = 'bottom',
   visible: requestVisible,
@@ -131,7 +131,7 @@ export function Outer({
   );
 }
 
-export function Target({ children }: { children: React.ReactNode }) {
+export function TooltipTrigger({ children }: { children: React.ReactNode }) {
   const { shouldMeasure, setTargetMeasurements } = useContext(TargetContext);
   const [hasLayedOut, setHasLayedOut] = useState(false);
   const targetRef = useRef<View>(null);
@@ -156,7 +156,7 @@ export function Target({ children }: { children: React.ReactNode }) {
   );
 }
 
-export function Content({
+export function TooltipContent({
   children,
   label,
 }: {
@@ -390,4 +390,4 @@ function opposite(position: 'top' | 'bottom'): string {
   }
 }
 
-export const TextBubble = createTextBubble(Content);
+export const TooltipTextBubble = createTextBubble(TooltipContent);

package/src/tooltip/index.web.tsx

@@ -27,16 +27,16 @@ TooltipContext.displayName = 'TooltipContext';
 /**
  * No-op on web. Portal Provider is only needed on native.
  */
-export function SheetCompatProvider({
+export function TooltipSheetCompatProvider({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return <>{children}</>;
 }
-SheetCompatProvider.displayName = 'TooltipSheetCompatProvider';
+TooltipSheetCompatProvider.displayName = 'TooltipSheetCompatProvider';
 
-export function Outer({
+export function Tooltip({
   children,
   position = 'bottom',
   visible,
@@ -66,7 +66,7 @@ export function Outer({
   );
 }
 
-export function Target({ children }: { children: React.ReactNode }) {
+export function TooltipTrigger({ children }: { children: React.ReactNode }) {
   return (
     <View collapsable={false} style={a.relative}>
       {children}
@@ -74,7 +74,7 @@ export function Target({ children }: { children: React.ReactNode }) {
   );
 }
 
-export function Content({
+export function TooltipContent({
   children,
   label,
 }: {
@@ -146,7 +146,7 @@ export function Content({
   );
 }
 
-export const TextBubble = createTextBubble(Content);
+export const TooltipTextBubble = createTextBubble(TooltipContent);
 
 const webStyles = StyleSheet.create({
   backdrop: {