@ankhorage/surface 1.3.1 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @ankhorage/surface
 
+## 1.4.0
+
+### Minor Changes
+
+- 247dd05: Add a `ScrollArea` layout primitive for themed, responsive scroll containers.
+
+  `ScrollArea` wraps React Native `ScrollView` behind Surface so higher-level packages such as ZORA can build screen-level scrolling without importing raw React Native scroll primitives directly.
+
 ## 1.3.1
 
 ### Patch Changes

package/dist/layout/ScrollArea.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type ScrollViewProps as ReactNativeScrollViewProps, type StyleProp, type ViewStyle } from 'react-native';
+import { type BoxStyleProps } from './helpers';
+export interface ScrollAreaProps extends BoxStyleProps, Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {
+    children?: React.ReactNode;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+}
+export declare function ScrollArea({ children, contentContainerStyle, p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, bg, radius, borderWidth, borderColor, width, height, minWidth, maxWidth, minHeight, maxHeight, flex, flexGrow, flexShrink, flexBasis, alignSelf, position, top, bottom, left, right, overflow, zIndex, opacity, style, ...scrollProps }: ScrollAreaProps): React.JSX.Element;
+//# sourceMappingURL=ScrollArea.d.ts.map

package/dist/layout/ScrollArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/layout/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,eAAe,IAAI,0BAA0B,EAClD,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,KAAK,aAAa,EAAoB,MAAM,WAAW,CAAC;AAEjE,MAAM,WAAW,eACf,SACE,aAAa,EACb,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,uBAAuB,GAAG,OAAO,CAAC;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,qBAAqB,EACrB,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,MAAM,EACN,WAAW,EACX,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,EACH,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,GAAG,WAAW,EACf,EAAE,eAAe,qBAoDjB"}

package/dist/layout/ScrollArea.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ScrollView, } from 'react-native';
+import { useResponsiveRuntime } from '../core/responsive';
+import { useTheme } from '../theme/ThemeContext';
+import { resolveBoxStyles } from './helpers';
+export function ScrollArea({ children, contentContainerStyle, p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, bg, radius, borderWidth, borderColor, width, height, minWidth, maxWidth, minHeight, maxHeight, flex, flexGrow, flexShrink, flexBasis, alignSelf, position, top, bottom, left, right, overflow, zIndex, opacity, style, ...scrollProps }) {
+    const { theme } = useTheme();
+    const { breakpoint } = useResponsiveRuntime();
+    const resolved = resolveBoxStyles(theme, breakpoint, {
+        p,
+        px,
+        py,
+        pt,
+        pb,
+        pl,
+        pr,
+        m,
+        mx,
+        my,
+        mt,
+        mb,
+        ml,
+        mr,
+        bg,
+        radius,
+        borderWidth,
+        borderColor,
+        width,
+        height,
+        minWidth,
+        maxWidth,
+        minHeight,
+        maxHeight,
+        flex,
+        flexGrow,
+        flexShrink,
+        flexBasis,
+        alignSelf,
+        position,
+        top,
+        bottom,
+        left,
+        right,
+        overflow,
+        zIndex,
+        opacity,
+    });
+    return (<ScrollView {...scrollProps} contentContainerStyle={contentContainerStyle} style={[resolved, style]}>
+      {children}
+    </ScrollView>);
+}
+//# sourceMappingURL=ScrollArea.js.map

package/dist/layout/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","sourceRoot":"","sources":["../../src/layout/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,UAAU,GAIX,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAsB,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAUjE,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,qBAAqB,EACrB,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,MAAM,EACN,WAAW,EACX,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,EACH,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,GAAG,WAAW,EACE;IAChB,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,EAAE,UAAU,EAAE;QACnD,CAAC;QACD,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,CAAC;QACD,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,MAAM;QACN,WAAW;QACX,WAAW;QACX,KAAK;QACL,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,SAAS;QACT,SAAS;QACT,IAAI;QACJ,QAAQ;QACR,UAAU;QACV,SAAS;QACT,SAAS;QACT,QAAQ;QACR,GAAG;QACH,MAAM;QACN,IAAI;QACJ,KAAK;QACL,QAAQ;QACR,MAAM;QACN,OAAO;KACR,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,UAAU,CACT,IAAI,WAAW,CAAC,CAChB,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAEzB;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport {\n  ScrollView,\n  type ScrollViewProps as ReactNativeScrollViewProps,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\n\nimport { useResponsiveRuntime } from '../core/responsive';\nimport { useTheme } from '../theme/ThemeContext';\nimport { type BoxStyleProps, resolveBoxStyles } from './helpers';\n\nexport interface ScrollAreaProps\n  extends\n    BoxStyleProps,\n    Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {\n  children?: React.ReactNode;\n  contentContainerStyle?: StyleProp<ViewStyle>;\n}\n\nexport function ScrollArea({\n  children,\n  contentContainerStyle,\n  p,\n  px,\n  py,\n  pt,\n  pb,\n  pl,\n  pr,\n  m,\n  mx,\n  my,\n  mt,\n  mb,\n  ml,\n  mr,\n  bg,\n  radius,\n  borderWidth,\n  borderColor,\n  width,\n  height,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  flex,\n  flexGrow,\n  flexShrink,\n  flexBasis,\n  alignSelf,\n  position,\n  top,\n  bottom,\n  left,\n  right,\n  overflow,\n  zIndex,\n  opacity,\n  style,\n  ...scrollProps\n}: ScrollAreaProps) {\n  const { theme } = useTheme();\n  const { breakpoint } = useResponsiveRuntime();\n  const resolved = resolveBoxStyles(theme, breakpoint, {\n    p,\n    px,\n    py,\n    pt,\n    pb,\n    pl,\n    pr,\n    m,\n    mx,\n    my,\n    mt,\n    mb,\n    ml,\n    mr,\n    bg,\n    radius,\n    borderWidth,\n    borderColor,\n    width,\n    height,\n    minWidth,\n    maxWidth,\n    minHeight,\n    maxHeight,\n    flex,\n    flexGrow,\n    flexShrink,\n    flexBasis,\n    alignSelf,\n    position,\n    top,\n    bottom,\n    left,\n    right,\n    overflow,\n    zIndex,\n    opacity,\n  });\n\n  return (\n    <ScrollView\n      {...scrollProps}\n      contentContainerStyle={contentContainerStyle}\n      style={[resolved, style]}\n    >\n      {children}\n    </ScrollView>\n  );\n}\n"]}

package/dist/layout/index.d.ts

@@ -12,6 +12,8 @@ export type { GridProps } from './Grid';
 export { Grid } from './Grid';
 export type { InlineProps } from './Inline';
 export { Inline } from './Inline';
+export type { ScrollAreaProps } from './ScrollArea';
+export { ScrollArea } from './ScrollArea';
 export type { ShowProps } from './Show';
 export { Show } from './Show';
 export type { SpacerProps } from './Spacer';

package/dist/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/layout/index.js

@@ -5,6 +5,7 @@ export { Container } from './Container';
 export { Divider } from './Divider';
 export { Grid } from './Grid';
 export { Inline } from './Inline';
+export { ScrollArea } from './ScrollArea';
 export { Show } from './Show';
 export { Spacer } from './Spacer';
 export { Stack } from './Stack';

package/dist/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export type { AppBarProps } from './AppBar';\nexport { AppBar } from './AppBar';\nexport type { BoxProps } from './Box';\nexport { Box } from './Box';\nexport type { CenterProps } from './Center';\nexport { Center } from './Center';\nexport type { ContainerProps } from './Container';\nexport { Container } from './Container';\nexport type { DividerProps } from './Divider';\nexport { Divider } from './Divider';\nexport type { GridProps } from './Grid';\nexport { Grid } from './Grid';\nexport type { InlineProps } from './Inline';\nexport { Inline } from './Inline';\nexport type { ShowProps } from './Show';\nexport { Show } from './Show';\nexport type { SpacerProps } from './Spacer';\nexport { Spacer } from './Spacer';\nexport type { StackProps } from './Stack';\nexport { Stack } from './Stack';\nexport type { SurfaceProps, SurfaceVariant } from './Surface';\nexport { Surface } from './Surface';\nexport type { TemplateProps } from './Template';\nexport { Template } from './Template';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export type { AppBarProps } from './AppBar';\nexport { AppBar } from './AppBar';\nexport type { BoxProps } from './Box';\nexport { Box } from './Box';\nexport type { CenterProps } from './Center';\nexport { Center } from './Center';\nexport type { ContainerProps } from './Container';\nexport { Container } from './Container';\nexport type { DividerProps } from './Divider';\nexport { Divider } from './Divider';\nexport type { GridProps } from './Grid';\nexport { Grid } from './Grid';\nexport type { InlineProps } from './Inline';\nexport { Inline } from './Inline';\nexport type { ScrollAreaProps } from './ScrollArea';\nexport { ScrollArea } from './ScrollArea';\nexport type { ShowProps } from './Show';\nexport { Show } from './Show';\nexport type { SpacerProps } from './Spacer';\nexport { Spacer } from './Spacer';\nexport type { StackProps } from './Stack';\nexport { Stack } from './Stack';\nexport type { SurfaceProps, SurfaceVariant } from './Surface';\nexport { Surface } from './Surface';\nexport type { TemplateProps } from './Template';\nexport { Template } from './Template';\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {

package/src/layout/ScrollArea.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  ScrollView,
+  type ScrollViewProps as ReactNativeScrollViewProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { useResponsiveRuntime } from '../core/responsive';
+import { useTheme } from '../theme/ThemeContext';
+import { type BoxStyleProps, resolveBoxStyles } from './helpers';
+
+export interface ScrollAreaProps
+  extends
+    BoxStyleProps,
+    Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {
+  children?: React.ReactNode;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+export function ScrollArea({
+  children,
+  contentContainerStyle,
+  p,
+  px,
+  py,
+  pt,
+  pb,
+  pl,
+  pr,
+  m,
+  mx,
+  my,
+  mt,
+  mb,
+  ml,
+  mr,
+  bg,
+  radius,
+  borderWidth,
+  borderColor,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  flex,
+  flexGrow,
+  flexShrink,
+  flexBasis,
+  alignSelf,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  overflow,
+  zIndex,
+  opacity,
+  style,
+  ...scrollProps
+}: ScrollAreaProps) {
+  const { theme } = useTheme();
+  const { breakpoint } = useResponsiveRuntime();
+  const resolved = resolveBoxStyles(theme, breakpoint, {
+    p,
+    px,
+    py,
+    pt,
+    pb,
+    pl,
+    pr,
+    m,
+    mx,
+    my,
+    mt,
+    mb,
+    ml,
+    mr,
+    bg,
+    radius,
+    borderWidth,
+    borderColor,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    alignSelf,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    overflow,
+    zIndex,
+    opacity,
+  });
+
+  return (
+    <ScrollView
+      {...scrollProps}
+      contentContainerStyle={contentContainerStyle}
+      style={[resolved, style]}
+    >
+      {children}
+    </ScrollView>
+  );
+}

package/src/layout/index.ts

@@ -12,6 +12,8 @@ export type { GridProps } from './Grid';
 export { Grid } from './Grid';
 export type { InlineProps } from './Inline';
 export { Inline } from './Inline';
+export type { ScrollAreaProps } from './ScrollArea';
+export { ScrollArea } from './ScrollArea';
 export type { ShowProps } from './Show';
 export { Show } from './Show';
 export type { SpacerProps } from './Spacer';