@oxyhq/bloom 0.6.17 → 0.6.18

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

@@ -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,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"}

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 element. The caller owns the
+     * DOM node that receives the CSS vars (via `useColorScopeStyle`).
      */
     asChild?: boolean;
+    /** Additional style applied to the wrapping `<div>`. Ignored with `asChild`. */
+    style?: React.CSSProperties;
     children: React.ReactNode;
 }
-export 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,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"}

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

@@ -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,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"}

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 element. The caller owns the
+     * DOM node that receives the CSS vars (via `useColorScopeStyle`).
      */
     asChild?: boolean;
+    /** Additional style applied to the wrapping `<div>`. Ignored with `asChild`. */
+    style?: React.CSSProperties;
     children: React.ReactNode;
 }
-export 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,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"}

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.18",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

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>
   );
 }

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

@@ -4,20 +4,7 @@ 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. */
@@ -51,7 +38,7 @@ export function BloomColorScope({
   }, [colorPreset, resolvedMode, parent]);
 
   const varsStyle = useMemo(
-    () => presetStyle(colorPreset, resolvedMode),
+    () => buildNativePresetStyle(colorPreset, resolvedMode),
     [colorPreset, resolvedMode],
   );
 
@@ -65,7 +52,7 @@ export function BloomColorScope({
 /**
  * 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 +61,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,29 @@
 import React, { 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 element. The caller owns the
+   * DOM node that receives the CSS vars (via `useColorScopeStyle`).
    */
   asChild?: boolean;
+  /** Additional style applied to the wrapping `<div>`. Ignored with `asChild`. */
+  style?: React.CSSProperties;
   children: React.ReactNode;
 }
 
-export function BloomColorScope({ colorPreset, asChild = false, children }: BloomColorScopeProps) {
+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 +36,21 @@ export function BloomColorScope({ colorPreset, asChild = false, children }: Bloo
     return { ...parent, theme, colorPreset };
   }, [colorPreset, resolvedMode, parent]);
 
-  const style = useMemo(
-    () => buildScopeVars(colorPreset, resolvedMode) as React.CSSProperties,
-    [colorPreset, resolvedMode],
+  const varsStyle = useMemo(
+    () => ({ ...(buildScopeVars(colorPreset, resolvedMode) as React.CSSProperties), ...style }),
+    [colorPreset, resolvedMode, style],
   );
 
   return (
     <BloomThemeContext.Provider value={contextValue}>
-      {asChild ? children : <div style={style}>{children}</div>}
+      {asChild ? children : <div style={varsStyle}>{children}</div>}
     </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));
+}