@storybook/react-native-ui-lite 10.2.3 → 10.3.0-canary-20260217005118

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)();
@@ -2297,10 +2313,18 @@ var Layout = ({
     }
     return {
       flex: 1,
-      backgroundColor: theme.background.content,
+      backgroundColor: storyBackgroundColor || theme.background.content,
       paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top
     };
-  }, [theme.background.content, story?.parameters?.noSafeArea, isDesktop]);
+  }, [storyBackgroundColor, theme.background.content, story?.parameters?.noSafeArea, isDesktop]);
+  const storyContentStyle = (0, import_react_native_ui_common7.useStyle)(
+    () => ({
+      flex: 1,
+      overflow: "hidden",
+      backgroundColor: storyBackgroundColor || theme.background.content
+    }),
+    [storyBackgroundColor, theme.background.content]
+  );
   const navContainerStyle = (0, import_react_native_ui_common7.useStyle)(
     () => ({
       paddingBottom: insets.bottom
@@ -2386,7 +2410,14 @@ var Layout = ({
           ) : null
         ] }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.View, { style: mobileContentStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: contentContainerStyle, pointerEvents: isResizing ? "none" : "auto", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react_native12.View,
+            {
+              style: isDesktop ? storyContentStyle : contentContainerStyle,
+              pointerEvents: isResizing ? "none" : "auto",
+              children
+            }
+          ),
           story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             import_react_native12.TouchableOpacity,
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "10.2.3",
+  "version": "10.3.0-canary-20260217005118",
   "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.3.0-canary-20260217005118",
+    "@storybook/react-native-ui-common": "10.3.0-canary-20260217005118",
     "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();
@@ -173,10 +186,19 @@ export const Layout = ({
 
     return {
       flex: 1,
-      backgroundColor: theme.background.content,
+      backgroundColor: storyBackgroundColor || theme.background.content,
       paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
     };
-  }, [theme.background.content, story?.parameters?.noSafeArea, isDesktop]);
+  }, [storyBackgroundColor, theme.background.content, story?.parameters?.noSafeArea, isDesktop]);
+
+  const storyContentStyle = useStyle(
+    () => ({
+      flex: 1,
+      overflow: 'hidden' as const,
+      backgroundColor: storyBackgroundColor || theme.background.content,
+    }),
+    [storyBackgroundColor, theme.background.content]
+  );
 
   const navContainerStyle = useStyle(
     () => ({
@@ -271,7 +293,10 @@ export const Layout = ({
       ) : null}
 
       <View style={mobileContentStyle}>
-        <View style={contentContainerStyle} pointerEvents={isResizing ? 'none' : 'auto'}>
+        <View
+          style={isDesktop ? storyContentStyle : contentContainerStyle}
+          pointerEvents={isResizing ? 'none' : 'auto'}
+        >
           {children}
         </View>