@mrmeg/expo-ui 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to `@mrmeg/expo-ui` are documented here. This project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.18.0]
+
+### Added
+
+- **`BottomSheet.Content` `backgroundStyle` pass-through.** The native sheet
+  surface (web vaul panel, Android `containerColor`, iOS
+  `presentationBackground`) previously hardcoded the themed card color.
+  `BottomSheet.Content` now accepts an optional `backgroundStyle` merged over
+  that default, so hosts can pass `{ backgroundColor: "transparent" }` to let
+  custom chrome (e.g. a Liquid Glass backdrop) show through. Omitting the prop
+  preserves the existing card background. The RN content column still paints
+  its own card fill; clear that via `style` when going transparent.
+
 ## [0.17.0]
 
 ### Added

package/LLM_USAGE.md

@@ -76,6 +76,11 @@ On native, `BottomSheet.Content` avoids the soft keyboard by default with
 React Native keyboard events. Pass `avoidKeyboard={false}` to opt out for a
 specific sheet.
 
+`BottomSheet.Content` themes the native sheet surface with the card color.
+Pass `backgroundStyle={{ backgroundColor: "transparent" }}` (with a `style`
+that clears the content column's card fill) when custom chrome such as a
+glass backdrop should show through; omitting it keeps the card background.
+
 i18n is optional. Do not add app-level i18n setup just to use this package.
 Plain children and `text` props work without `i18next` or `react-i18next`.
 `tx` props render fallback text when provided and otherwise render the key

package/README.md

@@ -374,7 +374,7 @@ Use `StyledText` or its aliases instead of raw `Text` whenever the text is part
 />
 ```
 
-Mount `UIProvider` once near the root before using `Dialog`, `AlertDialog`, `BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`, `SelectContent`, `Tooltip`, or package notifications. On native, `UIProvider` also wraps app content in the package keyboard-avoiding root by default, so ordinary screens and fixed footers stay above the soft keyboard without repeated app-local wrappers; pass `keyboardAvoiding={false}` to opt out, or use `KeyboardAvoidingView` directly for a subtree with custom behavior. Web skips the root keyboard wrapper unless `keyboardAvoiding` is explicitly enabled. `BottomSheet.Content` listens to React Native keyboard events when `avoidKeyboard` is enabled; it defaults to `true` and can be disabled per sheet. Trigger transient feedback with `notify`.
+Mount `UIProvider` once near the root before using `Dialog`, `AlertDialog`, `BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`, `SelectContent`, `Tooltip`, or package notifications. On native, `UIProvider` also wraps app content in the package keyboard-avoiding root by default, so ordinary screens and fixed footers stay above the soft keyboard without repeated app-local wrappers; pass `keyboardAvoiding={false}` to opt out, or use `KeyboardAvoidingView` directly for a subtree with custom behavior. Web skips the root keyboard wrapper unless `keyboardAvoiding` is explicitly enabled. `BottomSheet.Content` listens to React Native keyboard events when `avoidKeyboard` is enabled; it defaults to `true` and can be disabled per sheet. `BottomSheet.Content` also accepts `backgroundStyle`, merged over the themed card default on the native sheet surface (web panel, Android `containerColor`, iOS `presentationBackground`) — pass `{ backgroundColor: "transparent" }`, plus a `style` clearing the content column's card fill, to let custom chrome like a glass backdrop show through. Trigger transient feedback with `notify`.
 
 Use `Skeleton` components for loading content with stable dimensions, `EmptyState` for no-data/recoverable errors, `Alert` for blocking confirm/alert dialogs, and `Notification` for transient global feedback.
 

package/dist/components/BottomSheet.d.ts

@@ -117,6 +117,14 @@ interface BottomSheetContentProps extends ViewProps {
     avoidKeyboard?: boolean;
     /** Accepted for call-site ergonomics; ignored (platform owns keyboard). */
     dismissKeyboardOnDrag?: boolean;
+    /**
+     * Style for the native sheet surface behind the RN content — the web (vaul)
+     * panel, Android `containerColor`, iOS `presentationBackground`. Merged over
+     * the themed card default, so `{ backgroundColor: "transparent" }` lets a
+     * custom chrome (e.g. a glass backdrop) show through. The RN content column
+     * paints its own card fill too; clear that via `style`.
+     */
+    backgroundStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
     children: React.ReactNode;
 }
@@ -140,7 +148,7 @@ interface BottomSheetCloseProps {
 declare function useBottomSheetContext(): BottomSheetContextValue;
 declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, snapPoints, closeOnBackdropPress, children, }: BottomSheetProps): React.JSX.Element;
 declare function BottomSheetTrigger({ asChild, children, style: styleOverride }: BottomSheetTriggerProps): React.JSX.Element;
-declare function BottomSheetContent({ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, style: styleOverride, children, }: BottomSheetContentProps): React.JSX.Element;
+declare function BottomSheetContent({ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, backgroundStyle: backgroundStyleOverride, style: styleOverride, children, }: BottomSheetContentProps): React.JSX.Element;
 declare function BottomSheetHandle({ style }: BottomSheetHandleProps): React.JSX.Element;
 declare function BottomSheetHeader({ children, style, ...props }: BottomSheetHeaderProps): React.JSX.Element;
 declare function BottomSheetBody({ children, style, contentContainerStyle, onContentSizeChange, onLayout, ...props }: BottomSheetBodyProps): React.JSX.Element;

package/dist/components/BottomSheet.js

@@ -296,7 +296,7 @@ function BottomSheetTrigger({ asChild, children, style: styleOverride }) {
 // ============================================================================
 function BottomSheetContent({ 
 // Accepted-but-ignored ergonomics props (platform owns these behaviors):
-swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, style: styleOverride, children, }) {
+swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, backgroundStyle: backgroundStyleOverride, style: styleOverride, children, }) {
     const { open, onOpenChange, snapPoints, snapIndex, setSnapIndex, hasHeader } = useBottomSheetContext();
     const { theme } = useTheme();
     const dismissDisabled = useDismissDisabled();
@@ -337,8 +337,13 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
             if (open)
                 onOpenChange(false);
         }, 
-        // Themes the scrim/background on web (vaul) and Android (containerColor).
-        backgroundStyle: { backgroundColor: theme.colors.card }, children: _jsx(TextColorContext.Provider, { value: theme.colors.foreground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(View, { style: [
+        // Themes the scrim/background on web (vaul), Android (containerColor),
+        // and iOS (presentationBackground). Flattened so native readers that
+        // expect a plain object (not a style array) keep working.
+        backgroundStyle: StyleSheet.flatten([
+            { backgroundColor: theme.colors.card },
+            backgroundStyleOverride,
+        ]), children: _jsx(TextColorContext.Provider, { value: theme.colors.foreground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(View, { style: [
                         {
                             flex: 1,
                             maxHeight: detentHeight,

package/dist/hooks/useResources.d.ts

@@ -1,3 +1,17 @@
+/**
+ * Registers the Feather icon font in expo-font's per-request SSR store.
+ *
+ * Must be called from a **render body** on server-web (see `useResources`
+ * below): expo-font enters an `AsyncLocalStorage` store per request, so a
+ * module-scope registration lands in at most one request's store. Registering
+ * during render means every request emits the `@font-face` rule into
+ * `<style id="expo-generated-fonts">` and server-rendered `<Icon>`s agree with
+ * the client's first render.
+ *
+ * No-op on native and on client web (both already covered: native by the
+ * effect below, client web by the module-scope call above).
+ */
+export declare function ensureIconFontRegistered(): void;
 interface LoadResourcesResult {
     loaded: boolean;
     error: Error | null;

package/dist/hooks/useResources.js

@@ -4,15 +4,45 @@ import Feather from "@expo/vector-icons/Feather";
 import { Inter_400Regular, Inter_500Medium, Inter_600SemiBold, Inter_700Bold, } from "@expo-google-fonts/inter";
 import { Platform } from "react-native";
 import { useThemeStore } from "../state/themeStore.js";
-// Eager, module-scope load so expo-font registers Feather in its SSR
-// serverContext. When the server renders the HTML document, expo-font emits
-// an @font-face <style> into the head — without this kickoff, server-rendered
-// <Icon> components paint as empty glyphs until hydration runs the effect
-// below, producing a visible icon-pop flash on icon-heavy SSR screens
-// (e.g. OnboardingFlow). On the client this also primes the font ahead of
-// the effect; the effect's loadAsync becomes a no-op for the already-loaded
-// font.
-void Font.loadAsync(Feather.font);
+// Eager, module-scope load that primes the Feather font on the *client* before
+// first render: on web it synchronously injects the @font-face rule, which is
+// what makes the client's `Font.isLoaded("feather")` check read true during
+// hydration; on native it just starts the fetch ahead of the effect below
+// (which then no-ops for the already-loaded font).
+//
+// Deliberately guarded off server-web. expo-font's SSR store is per-request
+// AsyncLocalStorage, and Metro's inlineRequires defers this module's evaluation
+// until it is first required during a render — so on the server this line only
+// ever populated the store of whichever request happened to warm the module
+// cache. Requests 2+ then shipped HTML with no @font-face and empty icons while
+// the client rendered glyphs (React #418). Server registration happens
+// per-request in ensureIconFontRegistered() instead.
+if (typeof window !== "undefined") {
+    void Font.loadAsync(Feather.font);
+}
+/**
+ * Registers the Feather icon font in expo-font's per-request SSR store.
+ *
+ * Must be called from a **render body** on server-web (see `useResources`
+ * below): expo-font enters an `AsyncLocalStorage` store per request, so a
+ * module-scope registration lands in at most one request's store. Registering
+ * during render means every request emits the `@font-face` rule into
+ * `<style id="expo-generated-fonts">` and server-rendered `<Icon>`s agree with
+ * the client's first render.
+ *
+ * No-op on native and on client web (both already covered: native by the
+ * effect below, client web by the module-scope call above).
+ */
+export function ensureIconFontRegistered() {
+    if (Platform.OS !== "web" || typeof window !== "undefined")
+        return;
+    if (Font.isLoaded("feather"))
+        return; // per-request store; cheap
+    // Synchronous on server-web (expo-font routes to registerStaticFont). No
+    // `void`/try-catch: a throw here means we're outside a request scope, which
+    // must be loud.
+    Font.loadAsync(Feather.font);
+}
 // The four static Inter weights StyledText's native family keys point at
 // (see constants/fonts.ts). Native-only: web never renders these family names
 // ("Inter_400Regular" etc.) — fontFamilies.sansSerif resolves every weight to
@@ -66,6 +96,10 @@ function ensureWebFontStylesheet() {
  * un-download Inter. The Feather icon font always loads.
  */
 export const useResources = () => {
+    // Render-body (not effect) so server-web registers the icon font in *this*
+    // request's expo-font store — effects never run on the server and a
+    // module-scope call only reaches one request. See ensureIconFontRegistered.
+    ensureIconFontRegistered();
     const [loaded, setLoaded] = useState(false);
     const [error, setError] = useState(null);
     useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [