@oxyhq/bloom 0.30.3 → 0.30.5

package/src/bottom-sheet/index.web.tsx

@@ -0,0 +1,66 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { StyleSheet, type ViewStyle } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { Portal } from '../portal/index.web';
+import { Z_INDEX } from '../styles/z-index';
+import {
+    BottomSheetBase,
+    type BottomSheetProps,
+    type BottomSheetRef,
+    type BottomSheetShellProps,
+} from './BottomSheetBase';
+
+/**
+ * Web shell: bloom's stable DOM `<Portal>` (a single, reused
+ * `#bloom-portal-root` in `document.body`, created in a layout effect and never
+ * torn down) + a fixed, full-viewport `<GestureHandlerRootView>`.
+ *
+ * Why NOT RN-Web's `<Modal>` (which native uses): RN-Web's `Modal` mounts
+ * through `ModalPortal`, which appends its host `<div>` DURING RENDER and
+ * removes it in an unmount effect that also nulls its ref. Under React 19
+ * concurrent rendering / StrictMode, that host node is orphaned — the sheet
+ * mounts but its DOM lands in a detached node and never paints. Bloom's Portal
+ * has no render-phase side effect and a stable host, so the sheet paints
+ * reliably. This is the SAME portal the `Dialog` `center`/side paths already
+ * use on web.
+ *
+ * `keyboardHeight` / `onRequestClose` are native-shell concerns (the browser
+ * owns keyboard layout and back-button semantics) and are intentionally unused
+ * here.
+ */
+function WebShell({ children }: BottomSheetShellProps) {
+    return (
+        <Portal>
+            <GestureHandlerRootView style={webStyles.rootView} pointerEvents="box-none">
+                {children}
+            </GestureHandlerRootView>
+        </Portal>
+    );
+}
+
+const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef<BottomSheetRef>) => (
+    <BottomSheetBase {...props} ref={ref} Shell={WebShell} />
+));
+
+BottomSheet.displayName = 'BottomSheet';
+
+const webStyles = StyleSheet.create({
+    rootView: {
+        // The bloom Portal root is `position: fixed; inset: 0; pointer-events:
+        // none`; this fixed, full-viewport root re-enables pointer events for
+        // the sheet's own interactive descendants (backdrop, sheet) while empty
+        // gaps stay click-through (`box-none`). `StyleSheet.absoluteFill` from
+        // the sheet body then anchors to this box.
+        position: 'fixed' as ViewStyle['position'],
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: Z_INDEX.portalRoot,
+    },
+});
+
+export type { BottomSheetProps, BottomSheetRef };
+export default BottomSheet;
+export { BottomSheet };

package/src/index.web.ts

@@ -144,8 +144,8 @@ export { Combobox } from './combobox/index.web';
 export type { ComboboxProps, ComboboxOption } from './combobox/index.web';
 
 // Bottom sheet
-export { BottomSheet } from './bottom-sheet';
-export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
+export { BottomSheet } from './bottom-sheet/index.web';
+export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet/index.web';
 
 // Data display
 export * from './card';

package/src/theme/__tests__/color-utils.test.ts

@@ -0,0 +1,40 @@
+import { parseRgb, withAlpha } from '../color-utils';
+
+describe('color-utils', () => {
+  describe('parseRgb', () => {
+    it('parses canonical space-separated rgb', () => {
+      expect(parseRgb('rgb(31 153 239)')).toEqual({ r: 31, g: 153, b: 239 });
+    });
+    it('parses legacy comma-separated rgb / rgba', () => {
+      expect(parseRgb('rgb(31, 153, 239)')).toEqual({ r: 31, g: 153, b: 239 });
+      expect(parseRgb('rgba(31, 153, 239, 0.5)')).toEqual({ r: 31, g: 153, b: 239 });
+    });
+    it('parses #rrggbb and #rgb hex', () => {
+      expect(parseRgb('#1f99ef')).toEqual({ r: 31, g: 153, b: 239 });
+      expect(parseRgb('#abc')).toEqual({ r: 170, g: 187, b: 204 });
+    });
+    it('returns null on unparseable input', () => {
+      expect(parseRgb('hsl(277 50% 5%)')).toBeNull();
+      expect(parseRgb('transparent')).toBeNull();
+      expect(parseRgb('#12')).toBeNull();
+      expect(parseRgb('')).toBeNull();
+    });
+  });
+
+  describe('withAlpha', () => {
+    it('composes canonical space-separated rgb at the given alpha', () => {
+      expect(withAlpha('rgb(31 153 239)', 0.5)).toBe('rgba(31, 153, 239, 0.5)');
+    });
+    it('composes at alpha 0 (fully transparent, not the transparent keyword)', () => {
+      expect(withAlpha('rgb(31 153 239)', 0)).toBe('rgba(31, 153, 239, 0)');
+    });
+    it('handles legacy comma rgb and hex input', () => {
+      expect(withAlpha('rgb(31, 153, 239)', 0.5)).toBe('rgba(31, 153, 239, 0.5)');
+      expect(withAlpha('#1f99ef', 1)).toBe('rgba(31, 153, 239, 1)');
+    });
+    it('returns the input unchanged when it cannot be parsed', () => {
+      expect(withAlpha('hsl(277 50% 5%)', 0.5)).toBe('hsl(277 50% 5%)');
+      expect(withAlpha('transparent', 0)).toBe('transparent');
+    });
+  });
+});

package/src/theme/color-utils.ts

@@ -0,0 +1,54 @@
+/**
+ * Graceful color-utility primitives for consumer-facing composition.
+ *
+ * Unlike `parseRgbString` in `./color-space` (which THROWS on non-rgb input —
+ * it is a canonical-pipeline primitive where a bad value signals a real bug),
+ * these helpers fall back gracefully: they return `null` / the untouched input
+ * when a color string can't be parsed. That makes them safe to point at
+ * arbitrary consumer color values (theme tokens, user-supplied colors) — e.g.
+ * building `[bg, withAlpha(bg, 0)]` gradient stops for a scroll fade, where the
+ * `transparent` keyword would incorrectly fade through black.
+ */
+
+/** RGB channels, each 0..255. */
+export interface RgbChannels {
+  r: number;
+  g: number;
+  b: number;
+}
+
+/**
+ * Parse a color string into its RGB channels, or `null` if it can't be parsed.
+ *
+ * Accepts Bloom's canonical space-separated `rgb(r g b)` output, legacy
+ * comma-separated `rgb(r, g, b)` / `rgba(...)`, and `#rgb` / `#rrggbb` hex.
+ * Anything else yields `null` so callers can fall back to the original value.
+ */
+export function parseRgb(color: string): RgbChannels | null {
+  const trimmed = color.trim();
+  if (trimmed.startsWith('#')) {
+    let hex = trimmed.slice(1);
+    if (hex.length === 3) hex = hex.split('').map((c) => c + c).join('');
+    if (hex.length !== 6) return null;
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    if ([r, g, b].some((v) => Number.isNaN(v))) return null;
+    return { r, g, b };
+  }
+  const match = /rgba?\(([^)]+)\)/i.exec(trimmed);
+  if (!match || match[1] === undefined) return null;
+  const parts = match[1].split(/[\s,/]+/).filter(Boolean).map(Number);
+  if (parts.length < 3) return null;
+  const [r, g, b] = parts;
+  if (r === undefined || g === undefined || b === undefined) return null;
+  if ([r, g, b].some((v) => Number.isNaN(v))) return null;
+  return { r, g, b };
+}
+
+/** Compose `color` at `alpha`; returns the input unchanged if it can't parse. */
+export function withAlpha(color: string, alpha: number): string {
+  const rgb = parseRgb(color);
+  if (!rgb) return color;
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+}

package/src/theme/index.ts

@@ -19,6 +19,8 @@ export {
   HEX_TO_APP_COLOR,
   hexToAppColorName,
 } from './color-presets';
+export { parseRgb, withAlpha } from './color-utils';
+export type { RgbChannels } from './color-utils';
 export { getPresetVars, applyPresetVarsToDocument } from './preset-vars';
 export { applyDarkClass } from './apply-dark-class';
 export { setColorSchemeSafe } from './set-color-scheme-safe';