@oxyhq/bloom 0.6.17 → 0.6.19

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

@@ -1,6 +1,6 @@
 "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";
@@ -8,6 +8,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function BloomColorScope({
   colorPreset,
   asChild = false,
+  style,
   children
 }) {
   const parent = useContext(BloomThemeContext);
@@ -23,21 +24,41 @@ export function BloomColorScope({
       colorPreset
     };
   }, [colorPreset, resolvedMode, parent]);
-  const style = useMemo(() => buildScopeVars(colorPreset, resolvedMode), [colorPreset, resolvedMode]);
+  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: style,
-      children: children
-    })
+    children: content
   });
 }
 
 /**
  * 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) {
   const parent = useContext(BloomThemeContext);

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","children","parent","Error","resolvedMode","theme","mode","contextValue","style","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,QAAQ,0BAAuB;AACzD,SAASC,UAAU,QAAQ,mBAAgB;AAG3C,SAASC,cAAc,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAcjD,OAAO,SAASC,eAAeA,CAAC;EAAEC,WAAW;EAAEC,OAAO,GAAG,KAAK;EAAEC;AAA+B,CAAC,EAAE;EAChG,MAAMC,MAAM,GAAGX,UAAU,CAACE,iBAAiB,CAAC;EAC5C,IAAI,CAACS,MAAM,EAAE;IACX,MAAM,IAAIC,KAAK,CAAC,4DAA4D,CAAC;EAC/E;EAEA,MAAMC,YAAY,GAAGF,MAAM,CAACG,KAAK,CAACC,IAAI;EAEtC,MAAMC,YAAY,GAAGf,OAAO,CAAyB,MAAM;IACzD,MAAMa,KAAK,GAAGX,UAAU,CAACK,WAAW,EAAEK,YAAY,CAAC;IACnD,OAAO;MAAE,GAAGF,MAAM;MAAEG,KAAK;MAAEN;IAAY,CAAC;EAC1C,CAAC,EAAE,CAACA,WAAW,EAAEK,YAAY,EAAEF,MAAM,CAAC,CAAC;EAEvC,MAAMM,KAAK,GAAGhB,OAAO,CACnB,MAAMG,cAAc,CAACI,WAAW,EAAEK,YAAY,CAAwB,EACtE,CAACL,WAAW,EAAEK,YAAY,CAC5B,CAAC;EAED,oBACEP,IAAA,CAACJ,iBAAiB,CAACgB,QAAQ;IAACC,KAAK,EAAEH,YAAa;IAAAN,QAAA,EAC7CD,OAAO,GAAGC,QAAQ,gBAAGJ,IAAA;MAAKW,KAAK,EAAEA,KAAM;MAAAP,QAAA,EAAEA;IAAQ,CAAM;EAAC,CAC/B,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASU,kBAAkBA,CAACZ,WAAyB,EAAuB;EACjF,MAAMG,MAAM,GAAGX,UAAU,CAACE,iBAAiB,CAAC;EAC5C,IAAI,CAACS,MAAM,EAAE;IACX,MAAM,IAAIC,KAAK,CAAC,+DAA+D,CAAC;EAClF;EACA,MAAMC,YAAY,GAAGF,MAAM,CAACG,KAAK,CAACC,IAAI;EACtC,OAAOd,OAAO,CACZ,MAAMG,cAAc,CAACI,WAAW,EAAEK,YAAY,CAAwB,EACtE,CAACL,WAAW,EAAEK,YAAY,CAC5B,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["React","Children","cloneElement","isValidElement","useContext","useMemo","BloomThemeContext","buildTheme","buildScopeVars","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,GAAA,IAAAC,IAAA;AAmBjD,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,MAAMG,cAAc,CAACI,WAAW,EAAEM,YAAY,CAAwB,EACtE,CAACN,WAAW,EAAEM,YAAY,CAC5B,CAAC;EAED,IAAIK,OAAwB;EAC5B,IAAIV,OAAO,EAAE;IACX,MAAMW,KAAK,GAAGvB,QAAQ,CAACwB,IAAI,CAACV,QAAQ,CAAC;IACrC,IAAI,eAACZ,cAAc,CAAiBqB,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,gBAAGrB,YAAY,CAACsB,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,CAACJ,iBAAiB,CAACuB,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,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":[]}

package/lib/module/theme/color-scope/style-builder.js

@@ -1,6 +1,10 @@
 "use strict";
 
+import { Platform } from 'react-native';
 import { getPresetVars } from "../preset-vars.js";
+import { lazyRequire } from "../../utils/lazy-require.js";
+const getNativeWindVars = lazyRequire('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
@@ -11,4 +15,17 @@ export function buildScopeVars(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, mode) {
+  if (Platform.OS === 'web') return undefined;
+  const module = getNativeWindVars();
+  if (!module || typeof module.vars !== 'function') return undefined;
+  return module.vars(buildScopeVars(colorPreset, mode));
+}
 //# sourceMappingURL=style-builder.js.map

package/lib/module/theme/color-scope/style-builder.js.map

@@ -1 +1 @@
-{"version":3,"names":["getPresetVars","buildScopeVars","colorPreset","mode","includeResolvedColorVars"],"sourceRoot":"../../../../src","sources":["theme/color-scope/style-builder.ts"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,mBAAgB;AAG9C;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAC5BC,WAAyB,EACzBC,IAAsB,EACE;EACxB,OAAOH,aAAa,CAACE,WAAW,EAAEC,IAAI,EAAE;IAAEC,wBAAwB,EAAE;EAAK,CAAC,CAAC;AAC7E","ignoreList":[]}
+{"version":3,"names":["Platform","getPresetVars","lazyRequire","getNativeWindVars","buildScopeVars","colorPreset","mode","includeResolvedColorVars","buildNativePresetStyle","OS","undefined","module","vars"],"sourceRoot":"../../../../src","sources":["theme/color-scope/style-builder.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAwC,cAAc;AAEvE,SAASC,aAAa,QAAQ,mBAAgB;AAE9C,SAASC,WAAW,QAAQ,6BAA0B;AAMtD,MAAMC,iBAAiB,GAAGD,WAAW,CAAuB,YAAY,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,cAAcA,CAC5BC,WAAyB,EACzBC,IAAsB,EACE;EACxB,OAAOL,aAAa,CAACI,WAAW,EAAEC,IAAI,EAAE;IAAEC,wBAAwB,EAAE;EAAK,CAAC,CAAC;AAC7E;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CACpCH,WAAyB,EACzBC,IAAsB,EACA;EACtB,IAAIN,QAAQ,CAACS,EAAE,KAAK,KAAK,EAAE,OAAOC,SAAS;EAC3C,MAAMC,MAAM,GAAGR,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACQ,MAAM,IAAI,OAAOA,MAAM,CAACC,IAAI,KAAK,UAAU,EAAE,OAAOF,SAAS;EAClE,OAAOC,MAAM,CAACC,IAAI,CAACR,cAAc,CAACC,WAAW,EAAEC,IAAI,CAAC,CAAC;AACvD","ignoreList":[]}

package/lib/typescript/commonjs/icons/common.d.ts

@@ -37,6 +37,14 @@ export declare function useCommonSVGProps(props: Props): {
     title?: string | undefined;
     children?: React.ReactNode;
     filter?: string | undefined;
+    color?: ColorValue | undefined;
+    scale?: import("react-native-svg").NumberArray | undefined;
+    scaleX?: import("react-native-svg").NumberProp | undefined;
+    scaleY?: import("react-native-svg").NumberProp | undefined;
+    translateX?: import("react-native-svg").NumberProp | undefined;
+    translateY?: import("react-native-svg").NumberProp | undefined;
+    skewX?: import("react-native-svg").NumberProp | undefined;
+    skewY?: import("react-native-svg").NumberProp | undefined;
     hitSlop?: number | import("react-native").Insets | undefined;
     id?: string | undefined;
     needsOffscreenAlphaCompositing?: boolean | undefined | undefined;
@@ -128,14 +136,6 @@ export declare function useCommonSVGProps(props: Props): {
     accessibilityShowsLargeContentViewer?: boolean | undefined | undefined;
     accessibilityLargeContentTitle?: string | undefined | undefined;
     accessibilityRespondsToUserInteraction?: boolean | undefined | undefined;
-    color?: ColorValue | undefined;
-    scale?: import("react-native-svg").NumberArray | undefined;
-    scaleX?: import("react-native-svg").NumberProp | undefined;
-    scaleY?: import("react-native-svg").NumberProp | undefined;
-    translateX?: import("react-native-svg").NumberProp | undefined;
-    translateY?: import("react-native-svg").NumberProp | undefined;
-    skewX?: import("react-native-svg").NumberProp | undefined;
-    skewY?: import("react-native-svg").NumberProp | undefined;
     fontSize?: import("react-native-svg").NumberProp | undefined;
     fontWeight?: import("react-native-svg").FontWeight | undefined;
     fontStyle?: import("react-native-svg").FontStyle | undefined;

package/lib/typescript/commonjs/theme/BloomThemeProvider.d.ts

@@ -1,5 +1,6 @@
 import './init-css-interop';
 import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
 import { type AppColorName } from './color-presets';
 import { type BloomThemeStorage } from './persistence';
 import type { Theme, ThemeMode } from './types';
@@ -52,7 +53,13 @@ export interface BloomThemeProviderProps {
     fonts?: boolean;
     /** 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;
 }
-export declare function BloomThemeProvider({ mode: controlledMode, colorPreset: controlledPreset, defaultMode, defaultColorPreset, onModeChange, onColorPresetChange, persistKey, storage, awaitHydration, onHydrating, fonts, onFontsLoading, children, }: BloomThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function BloomThemeProvider({ mode: controlledMode, colorPreset: controlledPreset, defaultMode, defaultColorPreset, onModeChange, onColorPresetChange, persistKey, storage, awaitHydration, onHydrating, fonts, onFontsLoading, nativeWrapperStyle, children, }: BloomThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BloomThemeProvider.d.ts.map

package/lib/typescript/commonjs/theme/BloomThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,QAAQ,GACT,EAAE,uBAAuB,2CAkDzB"}
+{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,QAAQ,GACT,EAAE,uBAAuB,2CA+DzB"}

package/lib/typescript/commonjs/theme/apply-dark-class.d.ts

@@ -4,10 +4,11 @@ export declare function applyDarkClass(resolved: 'light' | 'dark'): void;
  * 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 declare function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark'): void;
 //# sourceMappingURL=apply-dark-class.d.ts.map

package/lib/typescript/commonjs/theme/apply-dark-class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAYpF"}
+{"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAUpF"}

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

@@ -5,11 +5,11 @@ 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;
 }
@@ -17,7 +17,7 @@ export declare function BloomColorScope({ colorPreset, asChild, style, children,
 /**
  * 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 declare function useColorScopeStyle(colorPreset: AppColorName): StyleProp<ViewStyle>;
 //# sourceMappingURL=index.d.ts.map

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;AAgBrD,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,2CAA2C;IAC3C,WAAW,EAAE,YAAY,CAAC;IAC1B;;;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,2CAkCtB;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

@@ -4,19 +4,18 @@ 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 declare function BloomColorScope({ colorPreset, asChild, children }: BloomColorScopeProps): import("react/jsx-runtime").JSX.Element;
+export declare function BloomColorScope({ colorPreset, asChild, style, children, }: BloomColorScopeProps): import("react/jsx-runtime").JSX.Element;
 /**
  * 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 declare function useColorScopeStyle(colorPreset: AppColorName): React.CSSProperties;
 //# sourceMappingURL=index.web.d.ts.map

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;AAIrD,MAAM,WAAW,oBAAoB;IACnC,2CAA2C;IAC3C,WAAW,EAAE,YAAY,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,OAAe,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAuB/F;AAED;;;;;GAKG;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,2CAA2C;IAC3C,WAAW,EAAE,YAAY,CAAC;IAC1B;;;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,2CAmCtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}

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

@@ -1,3 +1,4 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
 import type { AppColorName } from '../color-presets';
 /**
  * Build the CSS custom-property map for a preset, ready to be applied to a
@@ -5,4 +6,11 @@ import type { AppColorName } from '../color-presets';
  * `@theme` utilities (e.g. `bg-background`) honour the scope.
  */
 export declare function buildScopeVars(colorPreset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
+/**
+ * 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 declare function buildNativePresetStyle(colorPreset: AppColorName, mode: 'light' | 'dark'): StyleProp<ViewStyle>;
 //# sourceMappingURL=style-builder.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExB"}
+{"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AASrD;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,SAAS,CAAC,SAAS,CAAC,CAKtB"}

package/lib/typescript/module/icons/common.d.ts

@@ -37,6 +37,14 @@ export declare function useCommonSVGProps(props: Props): {
     title?: string | undefined;
     children?: React.ReactNode;
     filter?: string | undefined;
+    color?: ColorValue | undefined;
+    scale?: import("react-native-svg").NumberArray | undefined;
+    scaleX?: import("react-native-svg").NumberProp | undefined;
+    scaleY?: import("react-native-svg").NumberProp | undefined;
+    translateX?: import("react-native-svg").NumberProp | undefined;
+    translateY?: import("react-native-svg").NumberProp | undefined;
+    skewX?: import("react-native-svg").NumberProp | undefined;
+    skewY?: import("react-native-svg").NumberProp | undefined;
     hitSlop?: number | import("react-native").Insets | undefined;
     id?: string | undefined;
     needsOffscreenAlphaCompositing?: boolean | undefined | undefined;
@@ -128,14 +136,6 @@ export declare function useCommonSVGProps(props: Props): {
     accessibilityShowsLargeContentViewer?: boolean | undefined | undefined;
     accessibilityLargeContentTitle?: string | undefined | undefined;
     accessibilityRespondsToUserInteraction?: boolean | undefined | undefined;
-    color?: ColorValue | undefined;
-    scale?: import("react-native-svg").NumberArray | undefined;
-    scaleX?: import("react-native-svg").NumberProp | undefined;
-    scaleY?: import("react-native-svg").NumberProp | undefined;
-    translateX?: import("react-native-svg").NumberProp | undefined;
-    translateY?: import("react-native-svg").NumberProp | undefined;
-    skewX?: import("react-native-svg").NumberProp | undefined;
-    skewY?: import("react-native-svg").NumberProp | undefined;
     fontSize?: import("react-native-svg").NumberProp | undefined;
     fontWeight?: import("react-native-svg").FontWeight | undefined;
     fontStyle?: import("react-native-svg").FontStyle | undefined;

package/lib/typescript/module/theme/BloomThemeProvider.d.ts

@@ -1,5 +1,6 @@
 import './init-css-interop';
 import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
 import { type AppColorName } from './color-presets';
 import { type BloomThemeStorage } from './persistence';
 import type { Theme, ThemeMode } from './types';
@@ -52,7 +53,13 @@ export interface BloomThemeProviderProps {
     fonts?: boolean;
     /** 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;
 }
-export declare function BloomThemeProvider({ mode: controlledMode, colorPreset: controlledPreset, defaultMode, defaultColorPreset, onModeChange, onColorPresetChange, persistKey, storage, awaitHydration, onHydrating, fonts, onFontsLoading, children, }: BloomThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function BloomThemeProvider({ mode: controlledMode, colorPreset: controlledPreset, defaultMode, defaultColorPreset, onModeChange, onColorPresetChange, persistKey, storage, awaitHydration, onHydrating, fonts, onFontsLoading, nativeWrapperStyle, children, }: BloomThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BloomThemeProvider.d.ts.map

package/lib/typescript/module/theme/BloomThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,QAAQ,GACT,EAAE,uBAAuB,2CAkDzB"}
+{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,QAAQ,GACT,EAAE,uBAAuB,2CA+DzB"}

package/lib/typescript/module/theme/apply-dark-class.d.ts

@@ -4,10 +4,11 @@ export declare function applyDarkClass(resolved: 'light' | 'dark'): void;
  * 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 declare function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark'): void;
 //# sourceMappingURL=apply-dark-class.d.ts.map

package/lib/typescript/module/theme/apply-dark-class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAYpF"}
+{"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAUpF"}

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

@@ -5,11 +5,11 @@ 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;
 }
@@ -17,7 +17,7 @@ export declare function BloomColorScope({ colorPreset, asChild, style, children,
 /**
  * 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 declare function useColorScopeStyle(colorPreset: AppColorName): StyleProp<ViewStyle>;
 //# sourceMappingURL=index.d.ts.map

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;AAgBrD,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,2CAA2C;IAC3C,WAAW,EAAE,YAAY,CAAC;IAC1B;;;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,2CAkCtB;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

@@ -4,19 +4,18 @@ 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 declare function BloomColorScope({ colorPreset, asChild, children }: BloomColorScopeProps): import("react/jsx-runtime").JSX.Element;
+export declare function BloomColorScope({ colorPreset, asChild, style, children, }: BloomColorScopeProps): import("react/jsx-runtime").JSX.Element;
 /**
  * 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 declare function useColorScopeStyle(colorPreset: AppColorName): React.CSSProperties;
 //# sourceMappingURL=index.web.d.ts.map

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;AAIrD,MAAM,WAAW,oBAAoB;IACnC,2CAA2C;IAC3C,WAAW,EAAE,YAAY,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,OAAe,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAuB/F;AAED;;;;;GAKG;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,2CAA2C;IAC3C,WAAW,EAAE,YAAY,CAAC;IAC1B;;;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,2CAmCtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}

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

@@ -1,3 +1,4 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
 import type { AppColorName } from '../color-presets';
 /**
  * Build the CSS custom-property map for a preset, ready to be applied to a
@@ -5,4 +6,11 @@ import type { AppColorName } from '../color-presets';
  * `@theme` utilities (e.g. `bg-background`) honour the scope.
  */
 export declare function buildScopeVars(colorPreset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
+/**
+ * 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 declare function buildNativePresetStyle(colorPreset: AppColorName, mode: 'light' | 'dark'): StyleProp<ViewStyle>;
 //# sourceMappingURL=style-builder.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExB"}
+{"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AASrD;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,SAAS,CAAC,SAAS,CAAC,CAKtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.6.17",
+  "version": "0.6.19",
   "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,36 @@ 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('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/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,11 +310,24 @@ 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>
   );
 }