@storybook/react-native-ui-lite 10.2.3 → 10.2.4-canary-20260216224255

package/dist/index.d.ts

@@ -108,9 +108,10 @@ interface SidebarProps extends API_LoadedRefData {
 declare const Sidebar: React.NamedExoticComponent<SidebarProps>;
 
 declare const LiteUI: SBUI;
-declare const Layout: ({ storyHash, story, children, }: {
+declare const Layout: ({ storyHash, story, storyBackgroundColor, children, }: {
     storyHash: API_IndexHash | undefined;
     story?: StoryContext<ReactRenderer, Args>;
+    storyBackgroundColor?: string;
     children: ReactNode | ReactNode[];
 }) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -2223,13 +2223,29 @@ var mobileMenuDrawerContentStyle = {
   paddingBottom: 4
 };
 var flexStyle6 = { flex: 1 };
-var LiteUI = ({ storage, theme, storyHash, story, children }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_safe_area_context4.SafeAreaProvider, { style: flexStyle6, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectedNodeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_theming11.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_ui_common7.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_portal2.PortalProvider, { shouldAddRootHost: false, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Layout, { storyHash, story, children }),
+var LiteUI = ({
+  storage,
+  theme,
+  storyHash,
+  story,
+  storyBackgroundColor,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_safe_area_context4.SafeAreaProvider, { style: flexStyle6, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectedNodeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_theming11.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_ui_common7.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_portal2.PortalProvider, { shouldAddRootHost: false, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    Layout,
+    {
+      storyHash,
+      story,
+      storyBackgroundColor,
+      children
+    }
+  ),
   /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_portal2.PortalHost, { name: "storybook-lite-ui-root" })
 ] }) }) }) }) }) });
 var Layout = ({
   storyHash,
   story,
+  storyBackgroundColor,
   children
 }) => {
   const theme = (0, import_react_native_theming11.useTheme)();
@@ -2288,19 +2304,20 @@ var Layout = ({
     [desktopAddonsPanelOpen, addonsPanelHeight, theme.appBorderColor]
   );
   const containerStyle2 = (0, import_react_native_ui_common7.useStyle)(() => {
+    const backgroundColor = storyBackgroundColor || theme.background.content;
     if (isDesktop) {
       return {
         flex: 1,
-        backgroundColor: theme.background.content,
+        backgroundColor,
         flexDirection: "row"
       };
     }
     return {
       flex: 1,
-      backgroundColor: theme.background.content,
+      backgroundColor,
       paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top
     };
-  }, [theme.background.content, story?.parameters?.noSafeArea, isDesktop]);
+  }, [storyBackgroundColor, theme.background.content, story?.parameters?.noSafeArea, isDesktop]);
   const navContainerStyle = (0, import_react_native_ui_common7.useStyle)(
     () => ({
       paddingBottom: insets.bottom

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "10.2.3",
+  "version": "10.2.4-canary-20260216224255",
   "description": "lightweight ui components for react native storybook",
   "keywords": [
     "react",
@@ -38,8 +38,8 @@
     "@legendapp/list": "3.0.0-beta.31",
     "@nozbe/microfuzz": "^1.0.0",
     "@storybook/react": "^10.2.3",
-    "@storybook/react-native-theming": "^10.2.3",
-    "@storybook/react-native-ui-common": "^10.2.3",
+    "@storybook/react-native-theming": "10.2.4-canary-20260216224255",
+    "@storybook/react-native-ui-common": "10.2.4-canary-20260216224255",
     "polished": "^4.3.1",
     "react-native-safe-area-context": "^5"
   },

package/src/Layout.tsx

@@ -63,14 +63,25 @@ const mobileMenuDrawerContentStyle = {
 
 const flexStyle = { flex: 1 } satisfies ViewStyle;
 
-export const LiteUI: SBUI = ({ storage, theme, storyHash, story, children }): ReactElement => (
+export const LiteUI: SBUI = ({
+  storage,
+  theme,
+  storyHash,
+  story,
+  storyBackgroundColor,
+  children,
+}): ReactElement => (
   <SafeAreaProvider style={flexStyle}>
     <SelectedNodeProvider>
       <ThemeProvider theme={theme}>
         <StorageProvider storage={storage}>
           <LayoutProvider>
             <PortalProvider shouldAddRootHost={false}>
-              <Layout storyHash={storyHash} story={story}>
+              <Layout
+                storyHash={storyHash}
+                story={story}
+                storyBackgroundColor={storyBackgroundColor}
+              >
                 {children}
               </Layout>
               <PortalHost name="storybook-lite-ui-root" />
@@ -85,10 +96,12 @@ export const LiteUI: SBUI = ({ storage, theme, storyHash, story, children }): Re
 export const Layout = ({
   storyHash,
   story,
+  storyBackgroundColor,
   children,
 }: {
   storyHash: API_IndexHash | undefined;
   story?: StoryContext<ReactRenderer, Args>;
+  storyBackgroundColor?: string;
   children: ReactNode | ReactNode[];
 }) => {
   const theme = useTheme();
@@ -163,20 +176,22 @@ export const Layout = ({
   );
 
   const containerStyle = useStyle(() => {
+    const backgroundColor = storyBackgroundColor || theme.background.content;
+
     if (isDesktop) {
       return {
         flex: 1,
-        backgroundColor: theme.background.content,
+        backgroundColor,
         flexDirection: 'row',
       };
     }
 
     return {
       flex: 1,
-      backgroundColor: theme.background.content,
+      backgroundColor,
       paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
     };
-  }, [theme.background.content, story?.parameters?.noSafeArea, isDesktop]);
+  }, [storyBackgroundColor, theme.background.content, story?.parameters?.noSafeArea, isDesktop]);
 
   const navContainerStyle = useStyle(
     () => ({