@oxyhq/bloom 0.6.16 → 0.6.18

package/src/theme/BloomThemeProvider.tsx

@@ -13,7 +13,13 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useColorScheme as useRNColorScheme } from 'react-native';
+import {
+  Platform,
+  View,
+  useColorScheme as useRNColorScheme,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 
 import { useControllableState } from '../hooks/useControllableState';
 import { FontLoader } from '../fonts/FontLoader';
@@ -21,6 +27,7 @@ import { FontLoader } from '../fonts/FontLoader';
 import { applyDarkClass, applyColorPresetVars } from './apply-dark-class';
 import { buildTheme } from './build-theme';
 import { type AppColorName } from './color-presets';
+import { buildNativePresetStyle } from './color-scope/style-builder';
 import {
   readPersistedTheme,
   readPersistedThemeSync,
@@ -91,6 +98,13 @@ export interface BloomThemeProviderProps {
   /** Rendered while native fonts load. Ignored on web. */
   onFontsLoading?: React.ReactNode;
 
+  /**
+   * Style applied to the native `<View>` wrapper that carries the preset's
+   * CSS vars. Defaults to `{ flex: 1 }`. Ignored on web (the provider writes
+   * vars to `document.documentElement` instead of using a wrapper).
+   */
+  nativeWrapperStyle?: StyleProp<ViewStyle>;
+
   children: React.ReactNode;
 }
 
@@ -251,6 +265,7 @@ export function BloomThemeProvider({
   onHydrating,
   fonts = true,
   onFontsLoading,
+  nativeWrapperStyle,
   children,
 }: BloomThemeProviderProps) {
   const rnScheme = useRNColorScheme();
@@ -295,36 +310,26 @@ export function BloomThemeProvider({
   const shouldAwait = awaitHydration ?? Boolean(persistKey && storage);
   const isGated = shouldAwait && !hydrated;
 
+  const nativeVarsStyle = useMemo(
+    () => (Platform.OS === 'web' ? undefined : buildNativePresetStyle(colorPreset, resolved)),
+    [colorPreset, resolved],
+  );
+
+  const content = (
+    <FontLoader enabled={fonts} fallback={onFontsLoading}>
+      {isGated ? onHydrating ?? null : children}
+    </FontLoader>
+  );
+
   return (
     <BloomThemeContext.Provider value={contextValue}>
-      <FontLoader enabled={fonts} fallback={onFontsLoading}>
-        {isGated ? onHydrating ?? null : children}
-      </FontLoader>
+      {Platform.OS === 'web' ? (
+        content
+      ) : (
+        <View style={[{ flex: 1 }, nativeVarsStyle, nativeWrapperStyle]}>{content}</View>
+      )}
     </BloomThemeContext.Provider>
   );
 }
 
-/**
- * Scoped color override for a subtree. Inherits the resolved mode from the
- * parent `BloomThemeProvider` but renders descendants with a different preset.
- */
-export interface BloomColorScopeProps {
-  colorPreset: AppColorName;
-  children: React.ReactNode;
-}
-
-export function BloomColorScope({ colorPreset, children }: BloomColorScopeProps) {
-  const parent = useContext(BloomThemeContext);
-  if (!parent) {
-    throw new Error('BloomColorScope must be used within a <BloomThemeProvider>');
-  }
 
-  const contextValue = useMemo<BloomThemeContextValue>(() => {
-    const theme = buildTheme(colorPreset, parent.theme.mode);
-    return { ...parent, theme, colorPreset };
-  }, [colorPreset, parent]);
-
-  return (
-    <BloomThemeContext.Provider value={contextValue}>{children}</BloomThemeContext.Provider>
-  );
-}

package/src/theme/apply-dark-class.ts

@@ -1,5 +1,6 @@
 import { Platform } from 'react-native';
 import { APP_COLOR_PRESETS, type AppColorName } from './color-presets';
+import { getPresetVars } from './preset-vars';
 
 export function applyDarkClass(resolved: 'light' | 'dark') {
   if (Platform.OS === 'web' && typeof document !== 'undefined') {
@@ -11,18 +12,17 @@ export function applyDarkClass(resolved: 'light' | 'dark') {
  * Apply a color preset's CSS custom properties to the document root.
  * No-op on native — only affects web.
  *
- * Values are written as raw HSL triples (e.g. `185 100% 20%`), matching the
- * shadcn/Tailwind convention where stylesheets wrap them themselves with
- * `hsl(var(--primary))`. Writing pre-resolved `hsl(...)` values here would
- * produce invalid `hsl(hsl(...))` in consuming stylesheets and break theming.
+ * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
+ * resolved `--color-*` vars (`--color-primary: hsl(185 100% 20%)`) so both
+ * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
+ * utilities resolve consistently. Includes extended tokens (card, chart-*,
+ * content-area, sidebar-*) so consumer apps don't need to synthesize them.
  */
 export function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark') {
   if (Platform.OS !== 'web' || typeof document === 'undefined') return;
+  if (!APP_COLOR_PRESETS[preset]) return;
 
-  const config = APP_COLOR_PRESETS[preset];
-  if (!config) return;
-
-  const vars = resolved === 'dark' ? config.dark : config.light;
+  const vars = getPresetVars(preset, resolved, { includeResolvedColorVars: true });
   const root = document.documentElement.style;
 
   for (const [key, value] of Object.entries(vars)) {

package/src/theme/color-scope/index.tsx

@@ -0,0 +1,67 @@
+import React, { useContext, useMemo } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { BloomThemeContext, type BloomThemeContextValue } from '../BloomThemeProvider';
+import { buildTheme } from '../build-theme';
+import type { AppColorName } from '../color-presets';
+import { buildNativePresetStyle } from './style-builder';
+
+export interface BloomColorScopeProps {
+  /** Preset to apply within this subtree. */
+  colorPreset: AppColorName;
+  /**
+   * When `true`, do not render a wrapping `<View>`. The caller owns the
+   * element that receives the CSS vars (via `useColorScopeStyle`).
+   */
+  asChild?: boolean;
+  /** Additional style applied to the wrapping `<View>`. Ignored with `asChild`. */
+  style?: StyleProp<ViewStyle>;
+  children: React.ReactNode;
+}
+
+export function BloomColorScope({
+  colorPreset,
+  asChild = false,
+  style,
+  children,
+}: BloomColorScopeProps) {
+  const parent = useContext(BloomThemeContext);
+  if (!parent) {
+    throw new Error('BloomColorScope must be used within a <BloomThemeProvider>');
+  }
+
+  const resolvedMode = parent.theme.mode;
+
+  const contextValue = useMemo<BloomThemeContextValue>(() => {
+    const theme = buildTheme(colorPreset, resolvedMode);
+    return { ...parent, theme, colorPreset };
+  }, [colorPreset, resolvedMode, parent]);
+
+  const varsStyle = useMemo(
+    () => buildNativePresetStyle(colorPreset, resolvedMode),
+    [colorPreset, resolvedMode],
+  );
+
+  return (
+    <BloomThemeContext.Provider value={contextValue}>
+      {asChild ? children : <View style={[{ flex: 1 }, varsStyle, style]}>{children}</View>}
+    </BloomThemeContext.Provider>
+  );
+}
+
+/**
+ * Escape hatch for advanced cases where the wrapping element is owned by the
+ * caller. Returns a stable native style object carrying the preset's CSS vars.
+ * Returns `undefined` on web or when `nativewind` is not installed.
+ */
+export function useColorScopeStyle(colorPreset: AppColorName): StyleProp<ViewStyle> {
+  const parent = useContext(BloomThemeContext);
+  if (!parent) {
+    throw new Error('useColorScopeStyle must be used within a <BloomThemeProvider>');
+  }
+  const resolvedMode = parent.theme.mode;
+  return useMemo(
+    () => buildNativePresetStyle(colorPreset, resolvedMode),
+    [colorPreset, resolvedMode],
+  );
+}

package/src/theme/color-scope/index.web.tsx

@@ -0,0 +1,65 @@
+import React, { useContext, useMemo } from 'react';
+
+import { BloomThemeContext, type BloomThemeContextValue } from '../BloomThemeProvider';
+import { buildTheme } from '../build-theme';
+import type { AppColorName } from '../color-presets';
+import { buildScopeVars } from './style-builder';
+
+export interface BloomColorScopeProps {
+  /** Preset to apply within this subtree. */
+  colorPreset: AppColorName;
+  /**
+   * When `true`, do not render a wrapping element. The caller owns the
+   * DOM node that receives the CSS vars (via `useColorScopeStyle`).
+   */
+  asChild?: boolean;
+  /** Additional style applied to the wrapping `<div>`. Ignored with `asChild`. */
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export function BloomColorScope({
+  colorPreset,
+  asChild = false,
+  style,
+  children,
+}: BloomColorScopeProps) {
+  const parent = useContext(BloomThemeContext);
+  if (!parent) {
+    throw new Error('BloomColorScope must be used within a <BloomThemeProvider>');
+  }
+
+  const resolvedMode = parent.theme.mode;
+
+  const contextValue = useMemo<BloomThemeContextValue>(() => {
+    const theme = buildTheme(colorPreset, resolvedMode);
+    return { ...parent, theme, colorPreset };
+  }, [colorPreset, resolvedMode, parent]);
+
+  const varsStyle = useMemo(
+    () => ({ ...(buildScopeVars(colorPreset, resolvedMode) as React.CSSProperties), ...style }),
+    [colorPreset, resolvedMode, style],
+  );
+
+  return (
+    <BloomThemeContext.Provider value={contextValue}>
+      {asChild ? children : <div style={varsStyle}>{children}</div>}
+    </BloomThemeContext.Provider>
+  );
+}
+
+/**
+ * Escape hatch for advanced cases where the wrapping element is owned by the
+ * caller. Returns a stable React style object carrying the preset's CSS vars.
+ */
+export function useColorScopeStyle(colorPreset: AppColorName): React.CSSProperties {
+  const parent = useContext(BloomThemeContext);
+  if (!parent) {
+    throw new Error('useColorScopeStyle must be used within a <BloomThemeProvider>');
+  }
+  const resolvedMode = parent.theme.mode;
+  return useMemo(
+    () => buildScopeVars(colorPreset, resolvedMode) as React.CSSProperties,
+    [colorPreset, resolvedMode],
+  );
+}

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

@@ -0,0 +1,39 @@
+import { Platform, type StyleProp, type ViewStyle } from 'react-native';
+
+import { getPresetVars } from '../preset-vars';
+import type { AppColorName } from '../color-presets';
+import { lazyRequire } from '../../utils/lazy-require';
+
+interface NativeWindVarsModule {
+  vars: (record: Record<string, string>) => StyleProp<ViewStyle>;
+}
+
+const getNativeWindVars = lazyRequire<NativeWindVarsModule>('nativewind');
+
+/**
+ * Build the CSS custom-property map for a preset, ready to be applied to a
+ * subtree. Always includes the resolved `--color-*` vars so Tailwind v4
+ * `@theme` utilities (e.g. `bg-background`) honour the scope.
+ */
+export function buildScopeVars(
+  colorPreset: AppColorName,
+  mode: 'light' | 'dark',
+): Record<string, string> {
+  return getPresetVars(colorPreset, mode, { includeResolvedColorVars: true });
+}
+
+/**
+ * Build a native style object carrying every CSS var of the preset, using
+ * NativeWind's `vars()` when available. Returns `undefined` on web (where the
+ * provider writes vars to `documentElement` instead) or when `nativewind` is
+ * not installed.
+ */
+export function buildNativePresetStyle(
+  colorPreset: AppColorName,
+  mode: 'light' | 'dark',
+): StyleProp<ViewStyle> {
+  if (Platform.OS === 'web') return undefined;
+  const module = getNativeWindVars();
+  if (!module || typeof module.vars !== 'function') return undefined;
+  return module.vars(buildScopeVars(colorPreset, mode));
+}

package/src/theme/index.ts

@@ -1,9 +1,10 @@
-export { BloomThemeProvider, BloomColorScope } from './BloomThemeProvider';
+export { BloomThemeProvider } from './BloomThemeProvider';
 export type {
   BloomThemeProviderProps,
   BloomThemeContextValue,
-  BloomColorScopeProps,
 } from './BloomThemeProvider';
+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 type { Theme, ThemeColors, ThemeMode } from './types';