npm - @oxyhq/bloom - Versions diffs - 0.5.1 → 0.6.1 - Mend

@oxyhq/bloom 0.5.1 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/src/skeleton/index.tsx CHANGED Viewed

@@ -1,5 +1,12 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, View, type ViewStyle, type TextStyle, StyleSheet } from 'react-native';
+import {
+  Animated,
+  View,
+  type ViewStyle,
+  type TextStyle,
+  type DimensionValue,
+  StyleSheet,
+} from 'react-native';
 import { useTheme } from '../theme/use-theme';
 import { SUPPORTS_NATIVE_DRIVER } from '../styles/native-driver';
@@ -129,6 +136,52 @@ export function Pill({
 }
 Pill.displayName = 'Skeleton.Pill';
+/**
+ * Generic rectangular shimmering placeholder. Use for image/card/banner
+ * placeholders where neither {@link Pill} (forced borderRadius: 999) nor
+ * {@link Circle} fit. Defaults to a small borderRadius (8). Pass `0` for
+ * sharp corners or any larger number / percentage string for custom shapes.
+ */
+export function Box({
+  width,
+  height,
+  borderRadius = 8,
+  blend,
+  style,
+}: {
+  /** Width as a number, percentage string, or any valid RN dimension. */
+  width?: DimensionValue;
+  /** Height as a number, percentage string, or any valid RN dimension. */
+  height?: DimensionValue;
+  /**
+   * Corner radius — number or percentage string. Defaults to 8. Pass 0 for
+   * sharp corners.
+   */
+  borderRadius?: ViewStyle['borderRadius'];
+  /** When true, dampens shimmer opacity (use for nested skeletons). */
+  blend?: boolean;
+  style?: ViewStyle | ViewStyle[];
+}) {
+  const { colors } = useTheme();
+  const shimmer = useShimmer();
+  return (
+    <Animated.View
+      style={[
+        {
+          backgroundColor: colors.contrast50,
+          width,
+          height,
+          borderRadius,
+          opacity: Animated.multiply(shimmer, blend ? 0.6 : 1),
+        },
+        style,
+      ]}
+    />
+  );
+}
+Box.displayName = 'Skeleton.Box';
 export function Col({
   children,
   style,

package/src/theme/BloomThemeProvider.tsx CHANGED Viewed

@@ -1,3 +1,8 @@
+// Side-effect import — must come first. Initializes react-native-css-interop's
+// `darkMode` flag to `'class'` at module load so its MutationObserver doesn't
+// throw "Cannot manually set color scheme, as dark mode is type 'media'" the
+// first time Bloom toggles the dark class on <html>. See ./init-css-interop.
+import './init-css-interop';
 import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { useColorScheme as useRNColorScheme, Platform } from 'react-native';
 import { APP_COLOR_PRESETS, type AppColorName } from './color-presets';

package/src/theme/index.ts CHANGED Viewed

@@ -6,3 +6,4 @@ export type { AppColorName, AppColorPreset } from './color-presets';
 export { APP_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COLOR, hexToAppColorName } from './color-presets';
 export { applyDarkClass } from './apply-dark-class';
 export { setColorSchemeSafe } from './set-color-scheme-safe';
+export { initCssInteropDarkMode } from './init-css-interop';

package/src/theme/init-css-interop.ts ADDED Viewed

@@ -0,0 +1,126 @@
+import { Platform } from 'react-native';
+/**
+ * Initialize react-native-css-interop's `darkMode` flag to `'class'` once at
+ * module load time so that downstream calls to its color-scheme machinery do
+ * not throw.
+ *
+ * Why this exists
+ * ---------------
+ * Bloom toggles a `dark` class on `<html>` (see `applyDarkClass`). When the
+ * consuming app ships `react-native-css-interop` (directly or via NativeWind),
+ * its web runtime installs a MutationObserver on `<head>` that watches for
+ * the NativeWind-generated CSS to be injected. Once that CSS lands, the
+ * observer reads the `--css-interop-darkMode` CSS variable and calls
+ * `colorScheme.set(...)`. If the active value is `'media'` (the Tailwind
+ * default when `darkMode` is unset), `colorScheme.set` throws:
+ *
+ *   "Cannot manually set color scheme, as dark mode is type 'media'.
+ *    Please use StyleSheet.setFlag('darkMode', 'class')"
+ *
+ * Bloom is class-driven by design — `applyDarkClass` toggles `<html>.dark` —
+ * so we need to force the flag to `'class'` before that observer fires.
+ *
+ * How it works
+ * ------------
+ * - On web we set the documented `--css-interop-darkMode` CSS custom property
+ *   on `documentElement`. This is exactly what NativeWind's Tailwind plugin
+ *   writes when its config is `darkMode: 'class'`, so we are replicating the
+ *   public contract — not poking internals.
+ * - We additionally try to call `StyleSheet.setFlag('darkMode', 'class')`
+ *   off of `react-native-css-interop`'s exported `StyleSheet`. The function
+ *   does not exist in current `react-native-css-interop` (≤0.2.4), but the
+ *   error message advertises it and future versions are likely to add it.
+ *   Calling it is forward-compatible; missing-function is a no-op.
+ *
+ * The whole routine is idempotent and runs exactly once per process via
+ * a module-scoped guard.
+ */
+let initialized = false;
+let warned = false;
+const CSS_VAR_NAME = '--css-interop-darkMode';
+const CSS_VAR_VALUE = 'class dark';
+interface CssInteropStyleSheet {
+  setFlag?: (name: string, value: string) => void;
+}
+interface CssInteropModule {
+  StyleSheet?: CssInteropStyleSheet;
+}
+function warnOnce(message: string, error?: unknown): void {
+  if (warned) return;
+  warned = true;
+  // Internal Bloom diagnostic. Consumers cannot react to this — it signals
+  // a possible compatibility issue between Bloom and the host's css-interop.
+  // eslint-disable-next-line no-console
+  console.warn(`[Bloom] ${message}`, error ?? '');
+}
+function setWebCssVariable(): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  if (!root) return;
+  // Only set if not already explicitly configured by the host (e.g. the host's
+  // Tailwind config already emitted this variable). Avoid clobbering an
+  // explicit `media` choice from the consumer.
+  const current = root.style.getPropertyValue(CSS_VAR_NAME);
+  if (current) return;
+  root.style.setProperty(CSS_VAR_NAME, CSS_VAR_VALUE);
+}
+function tryCallSetFlag(): void {
+  let mod: CssInteropModule | undefined;
+  try {
+    // Dynamic require: css-interop is not a Bloom dependency. If the host
+    // app ships it (via NativeWind or directly), this resolves. Otherwise
+    // the require throws and we silently move on — there is nothing to
+    // initialize because css-interop is not in the bundle.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    mod = require('react-native-css-interop') as CssInteropModule;
+  } catch {
+    return;
+  }
+  const setFlag = mod?.StyleSheet?.setFlag;
+  if (typeof setFlag !== 'function') {
+    // Current react-native-css-interop (≤0.2.4) does not expose `setFlag`.
+    // The CSS variable path above is the actual fix on web; on native the
+    // flag is baked in by the Tailwind build. Surface a warning so we
+    // notice if a future version adds the method but we miss it.
+    return;
+  }
+  try {
+    setFlag.call(mod?.StyleSheet, 'darkMode', 'class');
+  } catch (error) {
+    warnOnce(
+      'react-native-css-interop StyleSheet.setFlag("darkMode", "class") threw. ' +
+        'Falling back to CSS variable. This is non-fatal.',
+      error,
+    );
+  }
+}
+/**
+ * Idempotent initializer. Safe to call from multiple modules; only the first
+ * invocation performs work.
+ */
+export function initCssInteropDarkMode(): void {
+  if (initialized) return;
+  initialized = true;
+  if (Platform.OS === 'web') {
+    setWebCssVariable();
+  }
+  tryCallSetFlag();
+}
+// Run on module import so that the flag is in place before any component
+// code (and, critically, before css-interop's MutationObserver fires on web).
+// useEffect would be too late — observers can fire during initial render.
+initCssInteropDarkMode();