@oxyhq/bloom 0.6.17 → 0.6.19

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

@@ -1,37 +1,28 @@
-import React, { useContext, useMemo } from 'react';
+import React, { Children, cloneElement, isValidElement, 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 { lazyRequire } from '../../utils/lazy-require';
-import { buildScopeVars } from './style-builder';
-
-interface NativeWindVarsModule {
-  vars: (record: Record<string, string>) => StyleProp<ViewStyle>;
-}
-
-const getNativeWindVars = lazyRequire<NativeWindVarsModule>('nativewind');
-
-function presetStyle(colorPreset: AppColorName, mode: 'light' | 'dark'): StyleProp<ViewStyle> {
-  const module = getNativeWindVars();
-  if (!module || typeof module.vars !== 'function') return undefined;
-  return module.vars(buildScopeVars(colorPreset, mode));
-}
+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`).
+   * When `true`, do not render a wrapping `<View>`. The single child is cloned
+   * with the scope's CSS vars merged into its `style` prop (Radix-style).
    */
   asChild?: boolean;
-  /** Additional style applied to the wrapping `<View>`. Ignored with `asChild`. */
+  /** Additional style applied to the wrapping `<View>` (or merged into the cloned child with `asChild`). */
   style?: StyleProp<ViewStyle>;
   children: React.ReactNode;
 }
 
+interface StyleableProps {
+  style?: StyleProp<ViewStyle>;
+}
+
 export function BloomColorScope({
   colorPreset,
   asChild = false,
@@ -51,21 +42,32 @@ export function BloomColorScope({
   }, [colorPreset, resolvedMode, parent]);
 
   const varsStyle = useMemo(
-    () => presetStyle(colorPreset, resolvedMode),
+    () => buildNativePresetStyle(colorPreset, resolvedMode),
     [colorPreset, resolvedMode],
   );
 
-  return (
-    <BloomThemeContext.Provider value={contextValue}>
-      {asChild ? children : <View style={[{ flex: 1 }, varsStyle, style]}>{children}</View>}
-    </BloomThemeContext.Provider>
-  );
+  let content: React.ReactNode;
+  if (asChild) {
+    const child = Children.only(children);
+    if (!isValidElement<StyleableProps>(child)) {
+      throw new Error(
+        'BloomColorScope with `asChild` requires a single React element child that accepts a `style` prop.',
+      );
+    }
+    const childStyle = child.props.style;
+    const mergedStyle: StyleProp<ViewStyle> = [varsStyle, style, childStyle];
+    content = cloneElement(child, { style: mergedStyle });
+  } else {
+    content = <View style={[{ flex: 1 }, varsStyle, style]}>{children}</View>;
+  }
+
+  return <BloomThemeContext.Provider value={contextValue}>{content}</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` when nativewind is not installed.
+ * Returns `undefined` on web or when `nativewind` is not installed.
  */
 export function useColorScopeStyle(colorPreset: AppColorName): StyleProp<ViewStyle> {
   const parent = useContext(BloomThemeContext);
@@ -74,7 +76,7 @@ export function useColorScopeStyle(colorPreset: AppColorName): StyleProp<ViewSty
   }
   const resolvedMode = parent.theme.mode;
   return useMemo(
-    () => presetStyle(colorPreset, resolvedMode),
+    () => buildNativePresetStyle(colorPreset, resolvedMode),
     [colorPreset, resolvedMode],
   );
 }

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

@@ -1,24 +1,33 @@
-import React, { useContext, useMemo } from 'react';
+import React, { Children, cloneElement, isValidElement, useContext, useMemo } from 'react';
 
-import { BloomThemeContext } from '../BloomThemeProvider';
+import { BloomThemeContext, type BloomThemeContextValue } from '../BloomThemeProvider';
 import { buildTheme } from '../build-theme';
 import type { AppColorName } from '../color-presets';
-import { BloomThemeContextValue } from '../BloomThemeProvider';
 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 is responsible
-   * for placing the returned context provider over a DOM node that owns the
-   * CSS vars (via `useColorScopeStyle`).
+   * When `true`, do not render a wrapping `<div>`. The single child is cloned
+   * with the scope's CSS vars merged into its `style` prop (Radix-style).
    */
   asChild?: boolean;
+  /** Additional style applied to the wrapping `<div>` (or merged into the cloned child with `asChild`). */
+  style?: React.CSSProperties;
   children: React.ReactNode;
 }
 
-export function BloomColorScope({ colorPreset, asChild = false, children }: BloomColorScopeProps) {
+interface StyleableProps {
+  style?: React.CSSProperties;
+}
+
+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>');
@@ -31,23 +40,33 @@ export function BloomColorScope({ colorPreset, asChild = false, children }: Bloo
     return { ...parent, theme, colorPreset };
   }, [colorPreset, resolvedMode, parent]);
 
-  const style = useMemo(
+  const varsStyle = useMemo(
     () => buildScopeVars(colorPreset, resolvedMode) as React.CSSProperties,
     [colorPreset, resolvedMode],
   );
 
-  return (
-    <BloomThemeContext.Provider value={contextValue}>
-      {asChild ? children : <div style={style}>{children}</div>}
-    </BloomThemeContext.Provider>
-  );
+  let content: React.ReactNode;
+  if (asChild) {
+    const child = Children.only(children);
+    if (!isValidElement<StyleableProps>(child)) {
+      throw new Error(
+        'BloomColorScope with `asChild` requires a single React element child that accepts a `style` prop.',
+      );
+    }
+    const childStyle = child.props.style;
+    const mergedStyle: React.CSSProperties = { ...varsStyle, ...style, ...childStyle };
+    content = cloneElement(child, { style: mergedStyle });
+  } else {
+    const mergedStyle: React.CSSProperties = { ...varsStyle, ...style };
+    content = <div style={mergedStyle}>{children}</div>;
+  }
+
+  return <BloomThemeContext.Provider value={contextValue}>{content}</BloomThemeContext.Provider>;
 }
 
 /**
  * Escape hatch for advanced cases where the wrapping element is owned by the
- * caller (e.g. a Pressable, a NativeWind-styled View that already has a style
- * prop). Returns a stable React `style` object carrying every CSS custom
- * property of the preset.
+ * caller. Returns a stable React style object carrying the preset's CSS vars.
  */
 export function useColorScopeStyle(colorPreset: AppColorName): React.CSSProperties {
   const parent = useContext(BloomThemeContext);

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

@@ -1,5 +1,14 @@
+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
@@ -12,3 +21,19 @@ export function buildScopeVars(
 ): 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));
+}