@oxyhq/bloom 0.2.2 → 0.3.0

package/src/code/Pre.tsx

@@ -0,0 +1,76 @@
+import React, { memo } from 'react';
+import {
+  Text as RNText,
+  View,
+  type TextProps as RNTextProps,
+  Platform,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+
+export interface PreProps extends Omit<RNTextProps, 'style'> {
+  containerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<TextStyle>;
+}
+
+/**
+ * Block-level monospace text — render as `<pre>` on web (CSS var family)
+ * and `<View><Text fontFamily="Geist Mono"></View>` on native.
+ */
+const PreComponent = function Pre({
+  children,
+  containerStyle,
+  style,
+  ...rest
+}: PreProps) {
+  const { colors } = useTheme();
+
+  if (Platform.OS === 'web') {
+    return React.createElement(
+      'pre',
+      {
+        ...rest,
+        style: {
+          fontFamily: 'var(--bloom-font-mono)',
+          fontSize: '0.92em',
+          color: colors.text,
+          backgroundColor: colors.backgroundSecondary,
+          padding: '12px 16px',
+          borderRadius: 8,
+          overflow: 'auto',
+          margin: 0,
+          ...(containerStyle as object | undefined),
+          ...(style as object | undefined),
+        },
+      },
+      children,
+    );
+  }
+
+  return (
+    <View
+      style={[
+        {
+          backgroundColor: colors.backgroundSecondary,
+          padding: 12,
+          borderRadius: 8,
+        },
+        containerStyle,
+      ]}>
+      <RNText
+        {...rest}
+        style={[
+          { fontFamily: 'Geist Mono', fontSize: 13, color: colors.text },
+          style,
+        ]}>
+        {children}
+      </RNText>
+    </View>
+  );
+};
+
+export const Pre = memo(PreComponent);
+Pre.displayName = 'Pre';

package/src/code/index.ts

@@ -0,0 +1,4 @@
+export { Code } from './Code';
+export type { CodeProps } from './Code';
+export { Pre } from './Pre';
+export type { PreProps } from './Pre';

package/src/context-menu/index.web.tsx

@@ -17,7 +17,7 @@ import { Pressable, StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { Portal } from '../portal';
+import { Portal } from '../portal/index.web';
 import { useInteractionState } from '../hooks/useInteractionState';
 import { ItemCtx, useItemContext } from './context';
 import type {

package/src/dialog/Dialog.web.tsx

@@ -3,7 +3,7 @@ import { Pressable, Text, View, type ViewStyle } from 'react-native';
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { useTheme } from '../theme/use-theme';
-import { Portal } from '../portal';
+import { Portal } from '../portal/index.web';
 import { Context, useDialogContext } from './context';
 import type { DialogControlProps, DialogInnerProps, DialogOuterProps } from './types';
 

package/src/fonts/FontLoader.native.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useFonts } from 'expo-font';
+import { FONT_ASSETS } from './font-assets';
+
+export interface FontLoaderProps {
+  /**
+   * Whether to gate rendering on fonts being loaded. When false the
+   * component is a pass-through that still calls `useFonts` (the hook must
+   * run unconditionally per the Rules of Hooks).
+   */
+  enabled: boolean;
+  /** Rendered while native fonts load. Defaults to `null`. */
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+/**
+ * Native font loader. Calls `expo-font`'s `useFonts` with the Bloom font
+ * asset map and gates `children` on the load result. The hook is invoked
+ * unconditionally — `enabled` only affects what's rendered, not whether
+ * fonts get loaded. This keeps Hook order stable across renders and means
+ * `<BloomThemeProvider fonts={false}>` still gets fonts pre-loaded if the
+ * provider tree ever flips `fonts` back on.
+ */
+export function FontLoader({ enabled, fallback, children }: FontLoaderProps) {
+  const [loaded] = useFonts(FONT_ASSETS);
+  if (!enabled) return <>{children}</>;
+  if (!loaded) return <>{fallback ?? null}</>;
+  return <>{children}</>;
+}

package/src/fonts/FontLoader.tsx

@@ -0,0 +1,37 @@
+import React, { useRef } from 'react';
+import { applyFontFaces } from './apply-font-faces';
+
+export interface FontLoaderProps {
+  /**
+   * Whether to load and inject the Bloom font system. When false, this
+   * component is a pass-through. Default true (set by `BloomThemeProvider`).
+   */
+  enabled: boolean;
+  /**
+   * Rendered while native fonts load. Ignored on web — the web variant
+   * applies CSS `@font-face` rules synchronously and uses `font-display: swap`
+   * to handle the FOUT period.
+   */
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+/**
+ * Web font loader. Applies the Bloom `@font-face` rules and CSS variables
+ * to `:root` on first render, before the first paint, using the same
+ * `useRef`-during-render pattern as `BloomThemeProvider`'s color application.
+ *
+ * No `useEffect`: the side effect runs synchronously inside the render phase,
+ * gated by a ref so it only executes once. Subsequent renders short-circuit.
+ *
+ * Native consumers resolve `FontLoader.native.tsx` via the React Native /
+ * Metro bundler's platform extension resolution — they never load this file.
+ */
+export function FontLoader({ enabled, children }: FontLoaderProps) {
+  const applied = useRef(false);
+  if (enabled && !applied.current) {
+    applied.current = true;
+    applyFontFaces();
+  }
+  return <>{children}</>;
+}

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

@@ -0,0 +1,41 @@
+import { Platform } from 'react-native';
+import blomusReg from '../../assets/fonts/BlomusModernus-Regular.woff2';
+import blomusBold from '../../assets/fonts/BlomusModernus-Bold.woff2';
+import interVar from '../../assets/fonts/InterVariable.woff2';
+import geistMono from '../../assets/fonts/GeistMono-Variable.woff2';
+import { fontFamilies } from './tokens';
+
+const STYLE_ID = 'bloom-fonts';
+
+/**
+ * Inject @font-face rules and font CSS variables onto :root.
+ *
+ * No-op on native and when `document` is unavailable (SSR). Idempotent —
+ * safe to call multiple times; subsequent calls early-return after the
+ * `<style id="bloom-fonts">` tag has been mounted.
+ *
+ * Follows the same shape as `applyDarkClass` / `applyColorPresetVars`: a
+ * single file with an internal `Platform.OS` check rather than a `.web.ts` /
+ * `.native.ts` split. Bundlers strip the unreachable web import code path
+ * on native because the function body short-circuits before referencing the
+ * woff2 URLs.
+ */
+export function applyFontFaces(): void {
+  if (Platform.OS !== 'web' || typeof document === 'undefined') return;
+  if (document.getElementById(STYLE_ID)) return;
+
+  const style = document.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent = `
+    @font-face { font-family: 'BlomusModernus'; src: url(${blomusReg}) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'BlomusModernus'; src: url(${blomusBold}) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Inter'; src: url(${interVar}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Geist Mono'; src: url(${geistMono}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    :root {
+      --bloom-font-display: ${fontFamilies.display};
+      --bloom-font-sans: ${fontFamilies.sans};
+      --bloom-font-mono: ${fontFamilies.mono};
+    }
+  `;
+  document.head.appendChild(style);
+}

package/src/fonts/font-assets.ts

@@ -0,0 +1,16 @@
+// Native font asset map for `useFonts(FONT_ASSETS)`.
+//
+// We ship variable .ttf files for Inter and Geist Mono (extracted from the
+// official rsms/inter and vercel/geist-font releases) so the same family name
+// covers all weights at runtime. `@fontsource(-variable)?/*` packages only
+// publish .woff2 for their variable axes — modern react-native font loading
+// requires .ttf, so we use the upstream variable TTFs instead. On web,
+// `apply-font-faces.ts` references the .woff2 variants directly and this file
+// is never imported.
+
+export const FONT_ASSETS = {
+  BlomusModernus: require('../../assets/fonts/BlomusModernus-Regular.ttf'),
+  'BlomusModernus-Bold': require('../../assets/fonts/BlomusModernus-Bold.ttf'),
+  Inter: require('../../assets/fonts/InterVariable.ttf'),
+  'Geist Mono': require('../../assets/fonts/GeistMono-Variable.ttf'),
+} as const;

package/src/fonts/index.ts

@@ -0,0 +1,6 @@
+export { fontFamilies, fontCssVars } from './tokens';
+export type { FontFamilyName } from './tokens';
+export { applyFontFaces } from './apply-font-faces';
+export { FONT_ASSETS } from './font-assets';
+export { FontLoader } from './FontLoader';
+export type { FontLoaderProps } from './FontLoader';

package/src/fonts/tokens.ts

@@ -0,0 +1,23 @@
+/**
+ * Font family tokens for the Bloom design system.
+ *
+ * `fontFamilies` resolves to CSS-style stacks (with system fallbacks) and is
+ * used to populate the `:root` custom properties on web and as the literal
+ * `fontFamily` string source on native.
+ *
+ * `fontCssVars` is the inverse map: name -> CSS custom property name.
+ */
+
+export const fontFamilies = {
+  display: 'BlomusModernus, Georgia, "Times New Roman", serif',
+  sans: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  mono: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace',
+} as const;
+
+export const fontCssVars = {
+  display: '--bloom-font-display',
+  sans: '--bloom-font-sans',
+  mono: '--bloom-font-mono',
+} as const;
+
+export type FontFamilyName = keyof typeof fontFamilies;

package/src/index.ts

@@ -68,3 +68,9 @@ export * as Menu from './menu';
 export * as Tooltip from './tooltip';
 export * as Select from './select';
 export * as ContextMenu from './context-menu';
+
+// Code (mono)
+export * as Code from './code';
+
+// Fonts
+export * as Fonts from './fonts';

package/src/index.web.ts

@@ -73,3 +73,9 @@ export * as Menu from './menu/index.web';
 export * as Tooltip from './tooltip/index.web';
 export * as Select from './select/index.web';
 export * as ContextMenu from './context-menu/index.web';
+
+// Code (mono)
+export * as Code from './code';
+
+// Fonts
+export * as Fonts from './fonts';

package/src/menu/index.web.tsx

@@ -13,7 +13,7 @@ import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'rea
 
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { Portal } from '../portal';
+import { Portal } from '../portal/index.web';
 import type { DialogControlProps } from '../dialog/types';
 import {
   MenuContext,

package/src/select/index.web.tsx

@@ -3,7 +3,7 @@ import { Pressable, StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { Portal } from '../portal';
+import { Portal } from '../portal/index.web';
 import { RadioIndicator } from '../radio-indicator';
 import { useInteractionState } from '../hooks/useInteractionState';
 import {

package/src/theme/BloomThemeProvider.tsx

@@ -4,6 +4,7 @@ import { APP_COLOR_PRESETS, type AppColorName } from './color-presets';
 import { getAdaptiveColors } from './adaptive-colors';
 import { applyDarkClass, applyColorPresetVars } from './apply-dark-class';
 import { setColorSchemeSafe } from './set-color-scheme-safe';
+import { FontLoader } from '../fonts/FontLoader';
 import type { Theme, ThemeColors, ThemeMode } from './types';
 
 function hslVarToCSS(value: string): string {
@@ -112,6 +113,18 @@ export interface BloomThemeProviderProps {
   colorPreset?: AppColorName;
   onModeChange?: (mode: ThemeMode) => void;
   onColorPresetChange?: (preset: AppColorName) => void;
+  /**
+   * Load and inject the Bloom font system (BlomusModernus + Inter Variable
+   * + Geist Mono Variable). Default true. Set to false to opt out — e.g.
+   * apps that already ship their own font loader.
+   */
+  fonts?: boolean;
+  /**
+   * Rendered while native fonts load. Ignored on web. Useful for matching
+   * an app-level splash screen so consumers don't see a system-font flash
+   * before the bundled fonts resolve.
+   */
+  onFontsLoading?: React.ReactNode;
   children: React.ReactNode;
 }
 
@@ -120,6 +133,8 @@ export function BloomThemeProvider({
   colorPreset: controlledPreset,
   onModeChange,
   onColorPresetChange,
+  fonts = true,
+  onFontsLoading,
   children,
 }: BloomThemeProviderProps) {
   const rnScheme = useRNColorScheme();
@@ -175,7 +190,9 @@ export function BloomThemeProvider({
 
   return (
     <BloomThemeContext.Provider value={contextValue}>
-      {children}
+      <FontLoader enabled={fonts} fallback={onFontsLoading}>
+        {children}
+      </FontLoader>
     </BloomThemeContext.Provider>
   );
 }

package/src/typography/index.tsx

@@ -8,11 +8,33 @@ import {
 } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { fontFamilies } from '../fonts/tokens';
 
 export type TextProps = RNTextProps;
 
 /**
- * Base text component with theme-aware default color.
+ * Platform-aware font-family value. On web we resolve to the CSS custom
+ * property set by `applyFontFaces` so consumer apps can re-skin Bloom by
+ * overriding `--bloom-font-*` at any subtree. On native we use the literal
+ * family name registered by `expo-font`'s `useFonts(FONT_ASSETS)`.
+ */
+function fontFamilyStyle(
+  kind: 'display' | 'sans' | 'mono',
+): { fontFamily: string } {
+  if (Platform.OS === 'web') {
+    return { fontFamily: `var(--bloom-font-${kind})` };
+  }
+  if (kind === 'display') return { fontFamily: 'BlomusModernus' };
+  if (kind === 'mono') return { fontFamily: 'Geist Mono' };
+  return { fontFamily: 'Inter' };
+}
+
+const SANS_FONT_FAMILY = fontFamilyStyle('sans');
+const DISPLAY_FONT_FAMILY = fontFamilyStyle('display');
+
+/**
+ * Base text component with theme-aware default color and the Bloom sans
+ * font family applied.
  */
 const TextComponent = function Text({ children, style, ...rest }: TextProps) {
   const { colors } = useTheme();
@@ -20,7 +42,7 @@ const TextComponent = function Text({ children, style, ...rest }: TextProps) {
   return (
     <RNText
       {...rest}
-      style={[{ fontSize: 13, color: colors.text }, style]}>
+      style={[{ fontSize: 13, color: colors.text, ...SANS_FONT_FAMILY }, style]}>
       {children}
     </RNText>
   );
@@ -31,13 +53,18 @@ Text.displayName = 'Text';
 
 export { Text as Span };
 
+const HEADING_STYLE: StyleProp<TextStyle> = {
+  ...DISPLAY_FONT_FAMILY,
+  fontWeight: '700',
+};
+
 function createHeadingElement({ level }: { level: number }): React.FC<TextProps> {
   return function HeadingElement({ style, ...rest }: TextProps) {
     const extraProps: Record<string, unknown> =
       Platform.OS === 'web'
         ? { role: 'heading', 'aria-level': level }
         : {};
-    return <Text {...extraProps} {...rest} style={style} />;
+    return <Text {...extraProps} {...rest} style={[HEADING_STYLE, style]} />;
   };
 }
 
@@ -66,3 +93,5 @@ export function P({ style, ...rest }: TextProps) {
   );
 }
 P.displayName = 'P';
+
+export { fontFamilies };