@ankhorage/zora 2.13.1 → 2.13.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2.13.2
+
+### Patch Changes
+
+- 954029e: Add an explicit fill sizing mode to SidebarLayout so bounded shells can preserve child-owned
+  scrolling while existing content-flow layouts keep their current behavior.
+
 ## 2.13.1
 
 ### Patch Changes

package/dist/layout/sidebar-layout/SidebarLayout.d.ts

@@ -3,7 +3,9 @@ import type { SidebarLayoutProps } from './types';
 /***
  * Responsive layout with a sidebar and main content area (and optional aside).
  *
- 
+ * `sizing="content"` keeps normal content-flow behavior. Use `sizing="fill"` when the layout
+ * should fill an already bounded parent so sidebar/content children receive the available space
+ * for their own scrolling or gesture ownership.
  */
 export declare const SidebarLayout: (props: SidebarLayoutProps) => React.ReactElement | null;
 //# sourceMappingURL=SidebarLayout.d.ts.map

package/dist/layout/sidebar-layout/SidebarLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarLayout.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/SidebarLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAwBlD;;;;GAIG;AACH,eAAO,MAAM,aAAa,0DAAyC,CAAC"}
+{"version":3,"file":"SidebarLayout.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/SidebarLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAiClD;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,0DAAyC,CAAC"}

package/dist/layout/sidebar-layout/SidebarLayout.js

@@ -1,19 +1,27 @@
 import React from 'react';
 import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-function SidebarLayoutInner({ themeId: _themeId, mode: _mode, interactionPolicy: _interactionPolicy, sidebar, children, aside, sidebarWidth = 280, asideWidth = 280, testID, }) {
-    return (<Stack direction={{ base: 'column', lg: 'row' }} gap="l" testID={testID} align="flex-start">
-      <Box width={{ base: '100%', lg: sidebarWidth }}>{sidebar}</Box>
-      <Box flex={1} width="100%">
+import { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';
+function SidebarLayoutInner({ themeId: _themeId, mode: _mode, interactionPolicy: _interactionPolicy, sidebar, children, aside, sidebarWidth = 280, asideWidth = 280, sizing, testID, }) {
+    const layoutSizing = resolveSidebarLayoutSizing(sizing);
+    return (<Stack {...layoutSizing.root} direction={{ base: 'column', lg: 'row' }} gap="l" testID={testID}>
+      <Box {...layoutSizing.child} width={{ base: '100%', lg: sidebarWidth }}>
+        {sidebar}
+      </Box>
+      <Box {...layoutSizing.child} flex={1} width="100%">
         {children}
       </Box>
-      {aside ? <Box width={{ base: '100%', lg: asideWidth }}>{aside}</Box> : null}
+      {aside ? (<Box {...layoutSizing.child} width={{ base: '100%', lg: asideWidth }}>
+          {aside}
+        </Box>) : null}
     </Stack>);
 }
 /***
  * Responsive layout with a sidebar and main content area (and optional aside).
  *
- 
+ * `sizing="content"` keeps normal content-flow behavior. Use `sizing="fill"` when the layout
+ * should fill an already bounded parent so sidebar/content children receive the available space
+ * for their own scrolling or gesture ownership.
  */
 export const SidebarLayout = withZoraThemeScope(SidebarLayoutInner);
 //# sourceMappingURL=SidebarLayout.js.map

package/dist/layout/sidebar-layout/SidebarLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarLayout.js","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/SidebarLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,iBAAiB,EAAE,kBAAkB,EACrC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,YAAY,GAAG,GAAG,EAClB,UAAU,GAAG,GAAG,EAChB,MAAM,GACa;IACnB,OAAO,CACL,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,YAAY,CACzF;MAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAC9D;MAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CACxB;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC7E;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { SidebarLayoutProps } from './types';\n\nfunction SidebarLayoutInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy: _interactionPolicy,\n  sidebar,\n  children,\n  aside,\n  sidebarWidth = 280,\n  asideWidth = 280,\n  testID,\n}: SidebarLayoutProps) {\n  return (\n    <Stack direction={{ base: 'column', lg: 'row' }} gap=\"l\" testID={testID} align=\"flex-start\">\n      <Box width={{ base: '100%', lg: sidebarWidth }}>{sidebar}</Box>\n      <Box flex={1} width=\"100%\">\n        {children}\n      </Box>\n      {aside ? <Box width={{ base: '100%', lg: asideWidth }}>{aside}</Box> : null}\n    </Stack>\n  );\n}\n\n/***\n * Responsive layout with a sidebar and main content area (and optional aside).\n *\n \n */\nexport const SidebarLayout = withZoraThemeScope(SidebarLayoutInner);\n"]}
+{"version":3,"file":"SidebarLayout.js","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/SidebarLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAG1E,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,iBAAiB,EAAE,kBAAkB,EACrC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,YAAY,GAAG,GAAG,EAClB,UAAU,GAAG,GAAG,EAChB,MAAM,EACN,MAAM,GACa;IACnB,MAAM,YAAY,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAExD,OAAO,CACL,CAAC,KAAK,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC7F;MAAA,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,CACrE;QAAA,CAAC,OAAO,CACV;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAChD;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,CACnE;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,GAAG,CAAC,CACP,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';\nimport type { SidebarLayoutProps } from './types';\n\nfunction SidebarLayoutInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy: _interactionPolicy,\n  sidebar,\n  children,\n  aside,\n  sidebarWidth = 280,\n  asideWidth = 280,\n  sizing,\n  testID,\n}: SidebarLayoutProps) {\n  const layoutSizing = resolveSidebarLayoutSizing(sizing);\n\n  return (\n    <Stack {...layoutSizing.root} direction={{ base: 'column', lg: 'row' }} gap=\"l\" testID={testID}>\n      <Box {...layoutSizing.child} width={{ base: '100%', lg: sidebarWidth }}>\n        {sidebar}\n      </Box>\n      <Box {...layoutSizing.child} flex={1} width=\"100%\">\n        {children}\n      </Box>\n      {aside ? (\n        <Box {...layoutSizing.child} width={{ base: '100%', lg: asideWidth }}>\n          {aside}\n        </Box>\n      ) : null}\n    </Stack>\n  );\n}\n\n/***\n * Responsive layout with a sidebar and main content area (and optional aside).\n *\n * `sizing=\"content\"` keeps normal content-flow behavior. Use `sizing=\"fill\"` when the layout\n * should fill an already bounded parent so sidebar/content children receive the available space\n * for their own scrolling or gesture ownership.\n */\nexport const SidebarLayout = withZoraThemeScope(SidebarLayoutInner);\n"]}

package/dist/layout/sidebar-layout/resolveSidebarLayoutSizing.d.ts

@@ -0,0 +1,14 @@
+import type { SidebarLayoutSizing } from './types';
+export declare function resolveSidebarLayoutSizing(sizing?: SidebarLayoutSizing): {
+    readonly root: {
+        readonly align: "flex-start" | "stretch";
+        readonly flex: 1 | undefined;
+        readonly minHeight: 0 | undefined;
+        readonly minWidth: 0 | undefined;
+    };
+    readonly child: {
+        readonly minHeight: 0 | undefined;
+        readonly minWidth: 0 | undefined;
+    };
+};
+//# sourceMappingURL=resolveSidebarLayoutSizing.d.ts.map

package/dist/layout/sidebar-layout/resolveSidebarLayoutSizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveSidebarLayoutSizing.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/resolveSidebarLayoutSizing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,wBAAgB,0BAA0B,CAAC,MAAM,GAAE,mBAA+B;;;;;;;;;;;EAejF"}

package/dist/layout/sidebar-layout/resolveSidebarLayoutSizing.js

@@ -0,0 +1,16 @@
+export function resolveSidebarLayoutSizing(sizing = 'content') {
+    const fillsAvailableSpace = sizing === 'fill';
+    return {
+        root: {
+            align: fillsAvailableSpace ? 'stretch' : 'flex-start',
+            flex: fillsAvailableSpace ? 1 : undefined,
+            minHeight: fillsAvailableSpace ? 0 : undefined,
+            minWidth: fillsAvailableSpace ? 0 : undefined,
+        },
+        child: {
+            minHeight: fillsAvailableSpace ? 0 : undefined,
+            minWidth: fillsAvailableSpace ? 0 : undefined,
+        },
+    };
+}
+//# sourceMappingURL=resolveSidebarLayoutSizing.js.map

package/dist/layout/sidebar-layout/resolveSidebarLayoutSizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveSidebarLayoutSizing.js","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/resolveSidebarLayoutSizing.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,0BAA0B,CAAC,SAA8B,SAAS;IAChF,MAAM,mBAAmB,GAAG,MAAM,KAAK,MAAM,CAAC;IAE9C,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY;YACrD,IAAI,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YACzC,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAC9C,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;SAC9C;QACD,KAAK,EAAE;YACL,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAC9C,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;SAC9C;KACO,CAAC;AACb,CAAC","sourcesContent":["import type { SidebarLayoutSizing } from './types';\n\nexport function resolveSidebarLayoutSizing(sizing: SidebarLayoutSizing = 'content') {\n  const fillsAvailableSpace = sizing === 'fill';\n\n  return {\n    root: {\n      align: fillsAvailableSpace ? 'stretch' : 'flex-start',\n      flex: fillsAvailableSpace ? 1 : undefined,\n      minHeight: fillsAvailableSpace ? 0 : undefined,\n      minWidth: fillsAvailableSpace ? 0 : undefined,\n    },\n    child: {\n      minHeight: fillsAvailableSpace ? 0 : undefined,\n      minWidth: fillsAvailableSpace ? 0 : undefined,\n    },\n  } as const;\n}\n"]}

package/dist/layout/sidebar-layout/types.d.ts

@@ -1,10 +1,12 @@
 import type React from 'react';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export type SidebarLayoutSizing = 'content' | 'fill';
 export interface SidebarLayoutProps extends ZoraBaseProps {
     sidebar: React.ReactNode;
     children?: React.ReactNode;
     aside?: React.ReactNode;
     sidebarWidth?: number;
     asideWidth?: number;
+    sizing?: SidebarLayoutSizing;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/layout/sidebar-layout/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B"}

package/dist/layout/sidebar-layout/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface SidebarLayoutProps extends ZoraBaseProps {\n  sidebar: React.ReactNode;\n  children?: React.ReactNode;\n  aside?: React.ReactNode;\n  sidebarWidth?: number;\n  asideWidth?: number;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type SidebarLayoutSizing = 'content' | 'fill';\n\nexport interface SidebarLayoutProps extends ZoraBaseProps {\n  sidebar: React.ReactNode;\n  children?: React.ReactNode;\n  aside?: React.ReactNode;\n  sidebarWidth?: number;\n  asideWidth?: number;\n  sizing?: SidebarLayoutSizing;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "2.13.1",
+  "version": "2.13.2",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {

package/src/layout/sidebar-layout/SidebarLayout.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';
+
+describe('SidebarLayout sizing contract', () => {
+  it('keeps content-flow sizing as the default', () => {
+    expect(resolveSidebarLayoutSizing()).toEqual({
+      root: {
+        align: 'flex-start',
+        flex: undefined,
+        minHeight: undefined,
+        minWidth: undefined,
+      },
+      child: {
+        minHeight: undefined,
+        minWidth: undefined,
+      },
+    });
+  });
+
+  it('fills a bounded parent for child-owned scroll areas', () => {
+    expect(resolveSidebarLayoutSizing('fill')).toEqual({
+      root: {
+        align: 'stretch',
+        flex: 1,
+        minHeight: 0,
+        minWidth: 0,
+      },
+      child: {
+        minHeight: 0,
+        minWidth: 0,
+      },
+    });
+  });
+});

package/src/layout/sidebar-layout/SidebarLayout.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';
 import type { SidebarLayoutProps } from './types';
 
 function SidebarLayoutInner({
@@ -13,15 +14,24 @@ function SidebarLayoutInner({
   aside,
   sidebarWidth = 280,
   asideWidth = 280,
+  sizing,
   testID,
 }: SidebarLayoutProps) {
+  const layoutSizing = resolveSidebarLayoutSizing(sizing);
+
   return (
-    <Stack direction={{ base: 'column', lg: 'row' }} gap="l" testID={testID} align="flex-start">
-      <Box width={{ base: '100%', lg: sidebarWidth }}>{sidebar}</Box>
-      <Box flex={1} width="100%">
+    <Stack {...layoutSizing.root} direction={{ base: 'column', lg: 'row' }} gap="l" testID={testID}>
+      <Box {...layoutSizing.child} width={{ base: '100%', lg: sidebarWidth }}>
+        {sidebar}
+      </Box>
+      <Box {...layoutSizing.child} flex={1} width="100%">
         {children}
       </Box>
-      {aside ? <Box width={{ base: '100%', lg: asideWidth }}>{aside}</Box> : null}
+      {aside ? (
+        <Box {...layoutSizing.child} width={{ base: '100%', lg: asideWidth }}>
+          {aside}
+        </Box>
+      ) : null}
     </Stack>
   );
 }
@@ -29,6 +39,8 @@ function SidebarLayoutInner({
 /***
  * Responsive layout with a sidebar and main content area (and optional aside).
  *
- 
+ * `sizing="content"` keeps normal content-flow behavior. Use `sizing="fill"` when the layout
+ * should fill an already bounded parent so sidebar/content children receive the available space
+ * for their own scrolling or gesture ownership.
  */
 export const SidebarLayout = withZoraThemeScope(SidebarLayoutInner);

package/src/layout/sidebar-layout/resolveSidebarLayoutSizing.ts

@@ -0,0 +1,18 @@
+import type { SidebarLayoutSizing } from './types';
+
+export function resolveSidebarLayoutSizing(sizing: SidebarLayoutSizing = 'content') {
+  const fillsAvailableSpace = sizing === 'fill';
+
+  return {
+    root: {
+      align: fillsAvailableSpace ? 'stretch' : 'flex-start',
+      flex: fillsAvailableSpace ? 1 : undefined,
+      minHeight: fillsAvailableSpace ? 0 : undefined,
+      minWidth: fillsAvailableSpace ? 0 : undefined,
+    },
+    child: {
+      minHeight: fillsAvailableSpace ? 0 : undefined,
+      minWidth: fillsAvailableSpace ? 0 : undefined,
+    },
+  } as const;
+}

package/src/layout/sidebar-layout/types.ts

@@ -2,10 +2,13 @@ import type React from 'react';
 
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
+export type SidebarLayoutSizing = 'content' | 'fill';
+
 export interface SidebarLayoutProps extends ZoraBaseProps {
   sidebar: React.ReactNode;
   children?: React.ReactNode;
   aside?: React.ReactNode;
   sidebarWidth?: number;
   asideWidth?: number;
+  sizing?: SidebarLayoutSizing;
 }