@oxyhq/bloom 0.6.18 → 0.6.20

package/lib/commonjs/theme/color-scope/index.js

@@ -22,6 +22,9 @@ function BloomColorScope({
   if (!parent) {
     throw new Error('BloomColorScope must be used within a <BloomThemeProvider>');
   }
+  if (!colorPreset) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
   const resolvedMode = parent.theme.mode;
   const contextValue = (0, _react.useMemo)(() => {
     const theme = (0, _buildTheme.buildTheme)(colorPreset, resolvedMode);
@@ -32,14 +35,28 @@ function BloomColorScope({
     };
   }, [colorPreset, resolvedMode, parent]);
   const varsStyle = (0, _react.useMemo)(() => (0, _styleBuilder.buildNativePresetStyle)(colorPreset, resolvedMode), [colorPreset, resolvedMode]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BloomThemeProvider.BloomThemeContext.Provider, {
-    value: contextValue,
-    children: asChild ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  let content;
+  if (asChild) {
+    const child = _react.Children.only(children);
+    if (! /*#__PURE__*/(0, _react.isValidElement)(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 = [varsStyle, style, childStyle];
+    content = /*#__PURE__*/(0, _react.cloneElement)(child, {
+      style: mergedStyle
+    });
+  } else {
+    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [{
         flex: 1
       }, varsStyle, style],
       children: children
-    })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BloomThemeProvider.BloomThemeContext.Provider, {
+    value: contextValue,
+    children: content
   });
 }
 

package/lib/commonjs/theme/color-scope/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_BloomThemeProvider","_buildTheme","_styleBuilder","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BloomColorScope","colorPreset","asChild","style","children","parent","useContext","BloomThemeContext","Error","resolvedMode","theme","mode","contextValue","useMemo","buildTheme","varsStyle","buildNativePresetStyle","jsx","Provider","value","View","flex","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_BloomThemeProvider","_buildTheme","_styleBuilder","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BloomColorScope","colorPreset","asChild","style","children","parent","useContext","BloomThemeContext","Error","jsx","Fragment","resolvedMode","theme","mode","contextValue","useMemo","buildTheme","varsStyle","buildNativePresetStyle","content","child","Children","only","isValidElement","childStyle","props","mergedStyle","cloneElement","View","flex","Provider","value","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/theme/color-scope/index.web.js

@@ -21,6 +21,9 @@ function BloomColorScope({
   if (!parent) {
     throw new Error('BloomColorScope must be used within a <BloomThemeProvider>');
   }
+  if (!colorPreset) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
   const resolvedMode = parent.theme.mode;
   const contextValue = (0, _react.useMemo)(() => {
     const theme = (0, _buildTheme.buildTheme)(colorPreset, resolvedMode);
@@ -30,16 +33,35 @@ function BloomColorScope({
       colorPreset
     };
   }, [colorPreset, resolvedMode, parent]);
-  const varsStyle = (0, _react.useMemo)(() => ({
-    ...(0, _styleBuilder.buildScopeVars)(colorPreset, resolvedMode),
-    ...style
-  }), [colorPreset, resolvedMode, style]);
+  const varsStyle = (0, _react.useMemo)(() => (0, _styleBuilder.buildScopeVars)(colorPreset, resolvedMode), [colorPreset, resolvedMode]);
+  let content;
+  if (asChild) {
+    const child = _react.Children.only(children);
+    if (! /*#__PURE__*/(0, _react.isValidElement)(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 = {
+      ...varsStyle,
+      ...style,
+      ...childStyle
+    };
+    content = /*#__PURE__*/(0, _react.cloneElement)(child, {
+      style: mergedStyle
+    });
+  } else {
+    const mergedStyle = {
+      ...varsStyle,
+      ...style
+    };
+    content = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: mergedStyle,
+      children: children
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BloomThemeProvider.BloomThemeContext.Provider, {
     value: contextValue,
-    children: asChild ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: varsStyle,
-      children: children
-    })
+    children: content
   });
 }
 

package/lib/commonjs/theme/color-scope/index.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_BloomThemeProvider","_buildTheme","_styleBuilder","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BloomColorScope","colorPreset","asChild","style","children","parent","useContext","BloomThemeContext","Error","resolvedMode","theme","mode","contextValue","useMemo","buildTheme","varsStyle","buildScopeVars","jsx","Provider","value","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.web.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_BloomThemeProvider","_buildTheme","_styleBuilder","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BloomColorScope","colorPreset","asChild","style","children","parent","useContext","BloomThemeContext","Error","jsx","Fragment","resolvedMode","theme","mode","contextValue","useMemo","buildTheme","varsStyle","buildScopeVars","content","child","Children","only","isValidElement","childStyle","props","mergedStyle","cloneElement","Provider","value","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/theme/color-scope/index.js

@@ -1,11 +1,11 @@
 "use strict";
 
-import React, { useContext, useMemo } from 'react';
+import React, { Children, cloneElement, isValidElement, useContext, useMemo } from 'react';
 import { View } from 'react-native';
 import { BloomThemeContext } from "../BloomThemeProvider.js";
 import { buildTheme } from "../build-theme.js";
 import { buildNativePresetStyle } from "./style-builder.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function BloomColorScope({
   colorPreset,
   asChild = false,
@@ -16,6 +16,9 @@ export function BloomColorScope({
   if (!parent) {
     throw new Error('BloomColorScope must be used within a <BloomThemeProvider>');
   }
+  if (!colorPreset) return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
   const resolvedMode = parent.theme.mode;
   const contextValue = useMemo(() => {
     const theme = buildTheme(colorPreset, resolvedMode);
@@ -26,14 +29,28 @@ export function BloomColorScope({
     };
   }, [colorPreset, resolvedMode, parent]);
   const varsStyle = useMemo(() => buildNativePresetStyle(colorPreset, resolvedMode), [colorPreset, resolvedMode]);
-  return /*#__PURE__*/_jsx(BloomThemeContext.Provider, {
-    value: contextValue,
-    children: asChild ? children : /*#__PURE__*/_jsx(View, {
+  let content;
+  if (asChild) {
+    const child = Children.only(children);
+    if (! /*#__PURE__*/isValidElement(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 = [varsStyle, style, childStyle];
+    content = /*#__PURE__*/cloneElement(child, {
+      style: mergedStyle
+    });
+  } else {
+    content = /*#__PURE__*/_jsx(View, {
       style: [{
         flex: 1
       }, varsStyle, style],
       children: children
-    })
+    });
+  }
+  return /*#__PURE__*/_jsx(BloomThemeContext.Provider, {
+    value: contextValue,
+    children: content
   });
 }
 

package/lib/module/theme/color-scope/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useMemo","View","BloomThemeContext","buildTheme","buildNativePresetStyle","jsx","_jsx","BloomColorScope","colorPreset","asChild","style","children","parent","Error","resolvedMode","theme","mode","contextValue","varsStyle","Provider","value","flex","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,SAASC,IAAI,QAAwC,cAAc;AAEnE,SAASC,iBAAiB,QAAqC,0BAAuB;AACtF,SAASC,UAAU,QAAQ,mBAAgB;AAE3C,SAASC,sBAAsB,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAezD,OAAO,SAASC,eAAeA,CAAC;EAC9BC,WAAW;EACXC,OAAO,GAAG,KAAK;EACfC,KAAK;EACLC;AACoB,CAAC,EAAE;EACvB,MAAMC,MAAM,GAAGb,UAAU,CAACG,iBAAiB,CAAC;EAC5C,IAAI,CAACU,MAAM,EAAE;IACX,MAAM,IAAIC,KAAK,CAAC,4DAA4D,CAAC;EAC/E;EAEA,MAAMC,YAAY,GAAGF,MAAM,CAACG,KAAK,CAACC,IAAI;EAEtC,MAAMC,YAAY,GAAGjB,OAAO,CAAyB,MAAM;IACzD,MAAMe,KAAK,GAAGZ,UAAU,CAACK,WAAW,EAAEM,YAAY,CAAC;IACnD,OAAO;MAAE,GAAGF,MAAM;MAAEG,KAAK;MAAEP;IAAY,CAAC;EAC1C,CAAC,EAAE,CAACA,WAAW,EAAEM,YAAY,EAAEF,MAAM,CAAC,CAAC;EAEvC,MAAMM,SAAS,GAAGlB,OAAO,CACvB,MAAMI,sBAAsB,CAACI,WAAW,EAAEM,YAAY,CAAC,EACvD,CAACN,WAAW,EAAEM,YAAY,CAC5B,CAAC;EAED,oBACER,IAAA,CAACJ,iBAAiB,CAACiB,QAAQ;IAACC,KAAK,EAAEH,YAAa;IAAAN,QAAA,EAC7CF,OAAO,GAAGE,QAAQ,gBAAGL,IAAA,CAACL,IAAI;MAACS,KAAK,EAAE,CAAC;QAAEW,IAAI,EAAE;MAAE,CAAC,EAAEH,SAAS,EAAER,KAAK,CAAE;MAAAC,QAAA,EAAEA;IAAQ,CAAO;EAAC,CAC3D,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASW,kBAAkBA,CAACd,WAAyB,EAAwB;EAClF,MAAMI,MAAM,GAAGb,UAAU,CAACG,iBAAiB,CAAC;EAC5C,IAAI,CAACU,MAAM,EAAE;IACX,MAAM,IAAIC,KAAK,CAAC,+DAA+D,CAAC;EAClF;EACA,MAAMC,YAAY,GAAGF,MAAM,CAACG,KAAK,CAACC,IAAI;EACtC,OAAOhB,OAAO,CACZ,MAAMI,sBAAsB,CAACI,WAAW,EAAEM,YAAY,CAAC,EACvD,CAACN,WAAW,EAAEM,YAAY,CAC5B,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["React","Children","cloneElement","isValidElement","useContext","useMemo","View","BloomThemeContext","buildTheme","buildNativePresetStyle","Fragment","_Fragment","jsx","_jsx","BloomColorScope","colorPreset","asChild","style","children","parent","Error","resolvedMode","theme","mode","contextValue","varsStyle","content","child","only","childStyle","props","mergedStyle","flex","Provider","value","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,YAAY,EAAEC,cAAc,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC1F,SAASC,IAAI,QAAwC,cAAc;AAEnE,SAASC,iBAAiB,QAAqC,0BAAuB;AACtF,SAASC,UAAU,QAAQ,mBAAgB;AAE3C,SAASC,sBAAsB,QAAQ,oBAAiB;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAsBzD,OAAO,SAASC,eAAeA,CAAC;EAC9BC,WAAW;EACXC,OAAO,GAAG,KAAK;EACfC,KAAK;EACLC;AACoB,CAAC,EAAE;EACvB,MAAMC,MAAM,GAAGf,UAAU,CAACG,iBAAiB,CAAC;EAC5C,IAAI,CAACY,MAAM,EAAE;IACX,MAAM,IAAIC,KAAK,CAAC,4DAA4D,CAAC;EAC/E;EAEA,IAAI,CAACL,WAAW,EAAE,oBAAOF,IAAA,CAAAF,SAAA;IAAAO,QAAA,EAAGA;EAAQ,CAAG,CAAC;EAExC,MAAMG,YAAY,GAAGF,MAAM,CAACG,KAAK,CAACC,IAAI;EAEtC,MAAMC,YAAY,GAAGnB,OAAO,CAAyB,MAAM;IACzD,MAAMiB,KAAK,GAAGd,UAAU,CAACO,WAAW,EAAEM,YAAY,CAAC;IACnD,OAAO;MAAE,GAAGF,MAAM;MAAEG,KAAK;MAAEP;IAAY,CAAC;EAC1C,CAAC,EAAE,CAACA,WAAW,EAAEM,YAAY,EAAEF,MAAM,CAAC,CAAC;EAEvC,MAAMM,SAAS,GAAGpB,OAAO,CACvB,MAAMI,sBAAsB,CAACM,WAAW,EAAEM,YAAY,CAAC,EACvD,CAACN,WAAW,EAAEM,YAAY,CAC5B,CAAC;EAED,IAAIK,OAAwB;EAC5B,IAAIV,OAAO,EAAE;IACX,MAAMW,KAAK,GAAG1B,QAAQ,CAAC2B,IAAI,CAACV,QAAQ,CAAC;IACrC,IAAI,eAACf,cAAc,CAAiBwB,KAAK,CAAC,EAAE;MAC1C,MAAM,IAAIP,KAAK,CACb,mGACF,CAAC;IACH;IACA,MAAMS,UAAU,GAAGF,KAAK,CAACG,KAAK,CAACb,KAAK;IACpC,MAAMc,WAAiC,GAAG,CAACN,SAAS,EAAER,KAAK,EAAEY,UAAU,CAAC;IACxEH,OAAO,gBAAGxB,YAAY,CAACyB,KAAK,EAAE;MAAEV,KAAK,EAAEc;IAAY,CAAC,CAAC;EACvD,CAAC,MAAM;IACLL,OAAO,gBAAGb,IAAA,CAACP,IAAI;MAACW,KAAK,EAAE,CAAC;QAAEe,IAAI,EAAE;MAAE,CAAC,EAAEP,SAAS,EAAER,KAAK,CAAE;MAAAC,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAC3E;EAEA,oBAAOL,IAAA,CAACN,iBAAiB,CAAC0B,QAAQ;IAACC,KAAK,EAAEV,YAAa;IAAAN,QAAA,EAAEQ;EAAO,CAA6B,CAAC;AAChG;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASS,kBAAkBA,CAACpB,WAAyB,EAAwB;EAClF,MAAMI,MAAM,GAAGf,UAAU,CAACG,iBAAiB,CAAC;EAC5C,IAAI,CAACY,MAAM,EAAE;IACX,MAAM,IAAIC,KAAK,CAAC,+DAA+D,CAAC;EAClF;EACA,MAAMC,YAAY,GAAGF,MAAM,CAACG,KAAK,CAACC,IAAI;EACtC,OAAOlB,OAAO,CACZ,MAAMI,sBAAsB,CAACM,WAAW,EAAEM,YAAY,CAAC,EACvD,CAACN,WAAW,EAAEM,YAAY,CAC5B,CAAC;AACH","ignoreList":[]}

package/lib/module/theme/color-scope/index.web.js

@@ -1,10 +1,10 @@
 "use strict";
 
-import React, { useContext, useMemo } from 'react';
+import React, { Children, cloneElement, isValidElement, useContext, useMemo } from 'react';
 import { BloomThemeContext } from "../BloomThemeProvider.js";
 import { buildTheme } from "../build-theme.js";
 import { buildScopeVars } from "./style-builder.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function BloomColorScope({
   colorPreset,
   asChild = false,
@@ -15,6 +15,9 @@ export function BloomColorScope({
   if (!parent) {
     throw new Error('BloomColorScope must be used within a <BloomThemeProvider>');
   }
+  if (!colorPreset) return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
   const resolvedMode = parent.theme.mode;
   const contextValue = useMemo(() => {
     const theme = buildTheme(colorPreset, resolvedMode);
@@ -24,16 +27,35 @@ export function BloomColorScope({
       colorPreset
     };
   }, [colorPreset, resolvedMode, parent]);
-  const varsStyle = useMemo(() => ({
-    ...buildScopeVars(colorPreset, resolvedMode),
-    ...style
-  }), [colorPreset, resolvedMode, style]);
+  const varsStyle = useMemo(() => buildScopeVars(colorPreset, resolvedMode), [colorPreset, resolvedMode]);
+  let content;
+  if (asChild) {
+    const child = Children.only(children);
+    if (! /*#__PURE__*/isValidElement(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 = {
+      ...varsStyle,
+      ...style,
+      ...childStyle
+    };
+    content = /*#__PURE__*/cloneElement(child, {
+      style: mergedStyle
+    });
+  } else {
+    const mergedStyle = {
+      ...varsStyle,
+      ...style
+    };
+    content = /*#__PURE__*/_jsx("div", {
+      style: mergedStyle,
+      children: children
+    });
+  }
   return /*#__PURE__*/_jsx(BloomThemeContext.Provider, {
     value: contextValue,
-    children: asChild ? children : /*#__PURE__*/_jsx("div", {
-      style: varsStyle,
-      children: children
-    })
+    children: content
   });
 }
 

package/lib/module/theme/color-scope/index.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useMemo","BloomThemeContext","buildTheme","buildScopeVars","jsx","_jsx","BloomColorScope","colorPreset","asChild","style","children","parent","Error","resolvedMode","theme","mode","contextValue","varsStyle","Provider","value","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.web.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAElD,SAASC,iBAAiB,QAAqC,0BAAuB;AACtF,SAASC,UAAU,QAAQ,mBAAgB;AAE3C,SAASC,cAAc,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAejD,OAAO,SAASC,eAAeA,CAAC;EAC9BC,WAAW;EACXC,OAAO,GAAG,KAAK;EACfC,KAAK;EACLC;AACoB,CAAC,EAAE;EACvB,MAAMC,MAAM,GAAGZ,UAAU,CAACE,iBAAiB,CAAC;EAC5C,IAAI,CAACU,MAAM,EAAE;IACX,MAAM,IAAIC,KAAK,CAAC,4DAA4D,CAAC;EAC/E;EAEA,MAAMC,YAAY,GAAGF,MAAM,CAACG,KAAK,CAACC,IAAI;EAEtC,MAAMC,YAAY,GAAGhB,OAAO,CAAyB,MAAM;IACzD,MAAMc,KAAK,GAAGZ,UAAU,CAACK,WAAW,EAAEM,YAAY,CAAC;IACnD,OAAO;MAAE,GAAGF,MAAM;MAAEG,KAAK;MAAEP;IAAY,CAAC;EAC1C,CAAC,EAAE,CAACA,WAAW,EAAEM,YAAY,EAAEF,MAAM,CAAC,CAAC;EAEvC,MAAMM,SAAS,GAAGjB,OAAO,CACvB,OAAO;IAAE,GAAIG,cAAc,CAACI,WAAW,EAAEM,YAAY,CAAyB;IAAE,GAAGJ;EAAM,CAAC,CAAC,EAC3F,CAACF,WAAW,EAAEM,YAAY,EAAEJ,KAAK,CACnC,CAAC;EAED,oBACEJ,IAAA,CAACJ,iBAAiB,CAACiB,QAAQ;IAACC,KAAK,EAAEH,YAAa;IAAAN,QAAA,EAC7CF,OAAO,GAAGE,QAAQ,gBAAGL,IAAA;MAAKI,KAAK,EAAEQ,SAAU;MAAAP,QAAA,EAAEA;IAAQ,CAAM;EAAC,CACnC,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASU,kBAAkBA,CAACb,WAAyB,EAAuB;EACjF,MAAMI,MAAM,GAAGZ,UAAU,CAACE,iBAAiB,CAAC;EAC5C,IAAI,CAACU,MAAM,EAAE;IACX,MAAM,IAAIC,KAAK,CAAC,+DAA+D,CAAC;EAClF;EACA,MAAMC,YAAY,GAAGF,MAAM,CAACG,KAAK,CAACC,IAAI;EACtC,OAAOf,OAAO,CACZ,MAAMG,cAAc,CAACI,WAAW,EAAEM,YAAY,CAAwB,EACtE,CAACN,WAAW,EAAEM,YAAY,CAC5B,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["React","Children","cloneElement","isValidElement","useContext","useMemo","BloomThemeContext","buildTheme","buildScopeVars","Fragment","_Fragment","jsx","_jsx","BloomColorScope","colorPreset","asChild","style","children","parent","Error","resolvedMode","theme","mode","contextValue","varsStyle","content","child","only","childStyle","props","mergedStyle","Provider","value","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.web.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,YAAY,EAAEC,cAAc,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAE1F,SAASC,iBAAiB,QAAqC,0BAAuB;AACtF,SAASC,UAAU,QAAQ,mBAAgB;AAE3C,SAASC,cAAc,QAAQ,oBAAiB;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAsBjD,OAAO,SAASC,eAAeA,CAAC;EAC9BC,WAAW;EACXC,OAAO,GAAG,KAAK;EACfC,KAAK;EACLC;AACoB,CAAC,EAAE;EACvB,MAAMC,MAAM,GAAGd,UAAU,CAACE,iBAAiB,CAAC;EAC5C,IAAI,CAACY,MAAM,EAAE;IACX,MAAM,IAAIC,KAAK,CAAC,4DAA4D,CAAC;EAC/E;EAEA,IAAI,CAACL,WAAW,EAAE,oBAAOF,IAAA,CAAAF,SAAA;IAAAO,QAAA,EAAGA;EAAQ,CAAG,CAAC;EAExC,MAAMG,YAAY,GAAGF,MAAM,CAACG,KAAK,CAACC,IAAI;EAEtC,MAAMC,YAAY,GAAGlB,OAAO,CAAyB,MAAM;IACzD,MAAMgB,KAAK,GAAGd,UAAU,CAACO,WAAW,EAAEM,YAAY,CAAC;IACnD,OAAO;MAAE,GAAGF,MAAM;MAAEG,KAAK;MAAEP;IAAY,CAAC;EAC1C,CAAC,EAAE,CAACA,WAAW,EAAEM,YAAY,EAAEF,MAAM,CAAC,CAAC;EAEvC,MAAMM,SAAS,GAAGnB,OAAO,CACvB,MAAMG,cAAc,CAACM,WAAW,EAAEM,YAAY,CAAwB,EACtE,CAACN,WAAW,EAAEM,YAAY,CAC5B,CAAC;EAED,IAAIK,OAAwB;EAC5B,IAAIV,OAAO,EAAE;IACX,MAAMW,KAAK,GAAGzB,QAAQ,CAAC0B,IAAI,CAACV,QAAQ,CAAC;IACrC,IAAI,eAACd,cAAc,CAAiBuB,KAAK,CAAC,EAAE;MAC1C,MAAM,IAAIP,KAAK,CACb,mGACF,CAAC;IACH;IACA,MAAMS,UAAU,GAAGF,KAAK,CAACG,KAAK,CAACb,KAAK;IACpC,MAAMc,WAAgC,GAAG;MAAE,GAAGN,SAAS;MAAE,GAAGR,KAAK;MAAE,GAAGY;IAAW,CAAC;IAClFH,OAAO,gBAAGvB,YAAY,CAACwB,KAAK,EAAE;MAAEV,KAAK,EAAEc;IAAY,CAAC,CAAC;EACvD,CAAC,MAAM;IACL,MAAMA,WAAgC,GAAG;MAAE,GAAGN,SAAS;MAAE,GAAGR;IAAM,CAAC;IACnES,OAAO,gBAAGb,IAAA;MAAKI,KAAK,EAAEc,WAAY;MAAAb,QAAA,EAAEA;IAAQ,CAAM,CAAC;EACrD;EAEA,oBAAOL,IAAA,CAACN,iBAAiB,CAACyB,QAAQ;IAACC,KAAK,EAAET,YAAa;IAAAN,QAAA,EAAEQ;EAAO,CAA6B,CAAC;AAChG;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASQ,kBAAkBA,CAACnB,WAAyB,EAAuB;EACjF,MAAMI,MAAM,GAAGd,UAAU,CAACE,iBAAiB,CAAC;EAC5C,IAAI,CAACY,MAAM,EAAE;IACX,MAAM,IAAIC,KAAK,CAAC,+DAA+D,CAAC;EAClF;EACA,MAAMC,YAAY,GAAGF,MAAM,CAACG,KAAK,CAACC,IAAI;EACtC,OAAOjB,OAAO,CACZ,MAAMG,cAAc,CAACM,WAAW,EAAEM,YAAY,CAAwB,EACtE,CAACN,WAAW,EAAEM,YAAY,CAC5B,CAAC;AACH","ignoreList":[]}

package/lib/typescript/commonjs/theme/color-scope/index.d.ts

@@ -2,14 +2,17 @@ import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import type { AppColorName } from '../color-presets';
 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`).
+     * Preset to apply within this subtree. When `undefined`, the scope is a
+     * no-op and children inherit the parent scope's preset unchanged.
+     */
+    colorPreset: AppColorName | undefined;
+    /**
+     * 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;
 }

package/lib/typescript/commonjs/theme/color-scope/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC,2CAA2C;IAC3C,WAAW,EAAE,YAAY,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CAuBtB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,CAUlF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CAoCtB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,CAUlF"}

package/lib/typescript/commonjs/theme/color-scope/index.web.d.ts

@@ -1,14 +1,17 @@
 import React from 'react';
 import type { AppColorName } from '../color-presets';
 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`).
+     * Preset to apply within this subtree. When `undefined`, the scope is a
+     * no-op and children inherit the parent scope's preset unchanged.
+     */
+    colorPreset: AppColorName | undefined;
+    /**
+     * 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>`. Ignored with `asChild`. */
+    /** Additional style applied to the wrapping `<div>` (or merged into the cloned child with `asChild`). */
     style?: React.CSSProperties;
     children: React.ReactNode;
 }

package/lib/typescript/commonjs/theme/color-scope/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC,2CAA2C;IAC3C,WAAW,EAAE,YAAY,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gFAAgF;IAChF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CAuBtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAI3F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yGAAyG;IACzG,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CAqCtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}

package/lib/typescript/module/theme/color-scope/index.d.ts

@@ -2,14 +2,17 @@ import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import type { AppColorName } from '../color-presets';
 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`).
+     * Preset to apply within this subtree. When `undefined`, the scope is a
+     * no-op and children inherit the parent scope's preset unchanged.
+     */
+    colorPreset: AppColorName | undefined;
+    /**
+     * 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;
 }

package/lib/typescript/module/theme/color-scope/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC,2CAA2C;IAC3C,WAAW,EAAE,YAAY,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CAuBtB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,CAUlF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CAoCtB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,CAUlF"}

package/lib/typescript/module/theme/color-scope/index.web.d.ts

@@ -1,14 +1,17 @@
 import React from 'react';
 import type { AppColorName } from '../color-presets';
 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`).
+     * Preset to apply within this subtree. When `undefined`, the scope is a
+     * no-op and children inherit the parent scope's preset unchanged.
+     */
+    colorPreset: AppColorName | undefined;
+    /**
+     * 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>`. Ignored with `asChild`. */
+    /** Additional style applied to the wrapping `<div>` (or merged into the cloned child with `asChild`). */
     style?: React.CSSProperties;
     children: React.ReactNode;
 }

package/lib/typescript/module/theme/color-scope/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC,2CAA2C;IAC3C,WAAW,EAAE,YAAY,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gFAAgF;IAChF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CAuBtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAI3F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yGAAyG;IACzG,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CAqCtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.6.18",
+  "version": "0.6.20",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/BloomColorScope.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import { render } from '@testing-library/react-native';
 
 import { BloomThemeProvider } from '../theme/BloomThemeProvider';
@@ -11,6 +11,10 @@ function CurrentPreset() {
   return <Text testID="preset">{colorPreset}</Text>;
 }
 
+function StyledChild({ style }: { style?: StyleProp<ViewStyle> }) {
+  return <View testID="styled-child" style={style}><CurrentPreset /></View>;
+}
+
 describe('BloomColorScope', () => {
   it('overrides the colorPreset of its subtree without affecting the parent', () => {
     const { getAllByTestId } = render(
@@ -27,16 +31,48 @@ describe('BloomColorScope', () => {
     expect(presets[1]).toBe('green');
   });
 
-  it('renders children directly with asChild (no wrapper element)', () => {
+  it('clones the single child and merges scope vars into its style (asChild)', () => {
     const { getByTestId } = render(
       <BloomThemeProvider defaultColorPreset="blue" fonts={false}>
         <BloomColorScope colorPreset="purple" asChild>
-          <CurrentPreset />
+          <StyledChild style={{ padding: 8 }} />
         </BloomColorScope>
       </BloomThemeProvider>,
     );
 
     expect(getByTestId('preset').props.children).toBe('purple');
+    const mergedStyle = getByTestId('styled-child').props.style;
+    expect(Array.isArray(mergedStyle)).toBe(true);
+    expect(mergedStyle).toEqual(
+      expect.arrayContaining([expect.objectContaining({ padding: 8 })]),
+    );
+  });
+
+  it('is a no-op when colorPreset is undefined (children inherit parent scope)', () => {
+    const { getByTestId } = render(
+      <BloomThemeProvider defaultColorPreset="blue" fonts={false}>
+        <BloomColorScope colorPreset={undefined}>
+          <CurrentPreset />
+        </BloomColorScope>
+      </BloomThemeProvider>,
+    );
+
+    expect(getByTestId('preset').props.children).toBe('blue');
+  });
+
+  it('throws when asChild has multiple children', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() =>
+      render(
+        <BloomThemeProvider defaultColorPreset="blue" fonts={false}>
+          <BloomColorScope colorPreset="purple" asChild>
+            <CurrentPreset />
+            <CurrentPreset />
+          </BloomColorScope>
+        </BloomThemeProvider>,
+      ),
+    ).toThrow();
+    consoleError.mockRestore();
   });
 
   it('throws when used outside BloomThemeProvider', () => {

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

@@ -1,4 +1,4 @@
-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';
@@ -7,18 +7,25 @@ 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`).
+   * Preset to apply within this subtree. When `undefined`, the scope is a
+   * no-op and children inherit the parent scope's preset unchanged.
+   */
+  colorPreset: AppColorName | undefined;
+  /**
+   * 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,
@@ -30,6 +37,8 @@ export function BloomColorScope({
     throw new Error('BloomColorScope must be used within a <BloomThemeProvider>');
   }
 
+  if (!colorPreset) return <>{children}</>;
+
   const resolvedMode = parent.theme.mode;
 
   const contextValue = useMemo<BloomThemeContextValue>(() => {
@@ -42,11 +51,22 @@ export function BloomColorScope({
     [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>;
 }
 
 /**

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

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { Children, cloneElement, isValidElement, useContext, useMemo } from 'react';
 
 import { BloomThemeContext, type BloomThemeContextValue } from '../BloomThemeProvider';
 import { buildTheme } from '../build-theme';
@@ -6,18 +6,25 @@ 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`).
+   * Preset to apply within this subtree. When `undefined`, the scope is a
+   * no-op and children inherit the parent scope's preset unchanged.
+   */
+  colorPreset: AppColorName | undefined;
+  /**
+   * 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>`. Ignored with `asChild`. */
+  /** Additional style applied to the wrapping `<div>` (or merged into the cloned child with `asChild`). */
   style?: React.CSSProperties;
   children: React.ReactNode;
 }
 
+interface StyleableProps {
+  style?: React.CSSProperties;
+}
+
 export function BloomColorScope({
   colorPreset,
   asChild = false,
@@ -29,6 +36,8 @@ export function BloomColorScope({
     throw new Error('BloomColorScope must be used within a <BloomThemeProvider>');
   }
 
+  if (!colorPreset) return <>{children}</>;
+
   const resolvedMode = parent.theme.mode;
 
   const contextValue = useMemo<BloomThemeContextValue>(() => {
@@ -37,15 +46,27 @@ export function BloomColorScope({
   }, [colorPreset, resolvedMode, parent]);
 
   const varsStyle = useMemo(
-    () => ({ ...(buildScopeVars(colorPreset, resolvedMode) as React.CSSProperties), ...style }),
-    [colorPreset, resolvedMode, style],
+    () => buildScopeVars(colorPreset, resolvedMode) as React.CSSProperties,
+    [colorPreset, resolvedMode],
   );
 
-  return (
-    <BloomThemeContext.Provider value={contextValue}>
-      {asChild ? children : <div style={varsStyle}>{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>;
 }
 
 /**