@xaui/native 0.2.6 → 0.2.7

package/dist/view/index.cjs

@@ -152,7 +152,9 @@ var buildStyle = (props) => ({
   ...props.borderRadius !== void 0 && resolveBorderRadius(props.borderRadius),
   ...props.border !== void 0 && resolveBorder(props.border),
   ...props.shadow !== void 0 && resolveShadow(props.shadow),
-  ...props.transform !== void 0 && { transform: resolveTransform(props.transform) }
+  ...props.transform !== void 0 && {
+    transform: resolveTransform(props.transform)
+  }
 });
 var Container = (props) => {
   const {
@@ -205,7 +207,7 @@ var Container = (props) => {
 };
 Container.displayName = "Container";
 
-// src/components/view/column/column.tsx
+// src/components/view/flex/flex.tsx
 
 
 
@@ -214,87 +216,102 @@ var MAIN_AXIS_JUSTIFY_MAP = {
   start: "flex-start",
   center: "center",
   end: "flex-end",
-  "space-between": "space-between",
-  "space-around": "space-around",
-  "space-evenly": "space-evenly"
+  spaceBetween: "space-between",
+  spaceAround: "space-around",
+  spaceEvenly: "space-evenly"
 };
 var CROSS_AXIS_ALIGN_MAP = {
   start: "flex-start",
   center: "center",
   end: "flex-end",
-  stretch: "stretch",
-  baseline: "baseline"
-};
-var resolveMainAxisAlignment = (alignment) => {
-  return MAIN_AXIS_JUSTIFY_MAP[_nullishCoalesce(alignment, () => ( "start"))];
+  stretch: "stretch"
 };
-var resolveCrossAxisAlignment = (alignment) => {
-  return CROSS_AXIS_ALIGN_MAP[_nullishCoalesce(alignment, () => ( "center"))];
+var resolveMainAxisAlignment = (alignment) => MAIN_AXIS_JUSTIFY_MAP[_nullishCoalesce(alignment, () => ( "start"))];
+var resolveCrossAxisAlignment = (alignment) => CROSS_AXIS_ALIGN_MAP[_nullishCoalesce(alignment, () => ( "center"))];
+var resolveMainAxisSize = (size = "max", direction) => {
+  if (size === "min") return {};
+  return direction === "vertical" ? { flex: 1 } : { width: "100%" };
 };
 
-// src/components/view/column/column.tsx
-var Column = ({
+// src/components/view/flex/flex.tsx
+var Flex = ({
   children,
+  direction,
   mainAxisAlignment,
   crossAxisAlignment,
-  spacing,
-  reverse = false,
-  fullWidth,
+  mainAxisSize,
+  wrap = false,
+  gap,
+  reversed = false,
+  flex,
   style,
-  noGrowth = false
+  testID
 }) => {
-  const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
-  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
+  const flexDir = direction === "horizontal" ? reversed ? "row-reverse" : "row" : reversed ? "column-reverse" : "column";
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
+      testID,
       style: [
+        resolveMainAxisSize(mainAxisSize, direction),
         {
-          flex: noGrowth ? void 0 : 1,
-          flexDirection: reverse ? "column-reverse" : "column",
+          flexDirection: flexDir,
           justifyContent: resolveMainAxisAlignment(mainAxisAlignment),
-          alignItems: resolveCrossAxisAlignment(crossAxisAlignment)
+          alignItems: resolveCrossAxisAlignment(crossAxisAlignment),
+          flexWrap: wrap ? "wrap" : "nowrap",
+          ...gap !== void 0 && { gap },
+          ...flex !== void 0 && { flex }
         },
-        fullWidthStyle,
-        gapStyle,
         style
       ]
     },
     children
   );
 };
+Flex.displayName = "Flex";
+
+// src/components/view/column/column.tsx
+
+var Column = (props) => /* @__PURE__ */ _react2.default.createElement(Flex, { ...props, direction: "vertical" });
+Column.displayName = "Column";
 
 // src/components/view/row/row.tsx
 
+var Row = (props) => /* @__PURE__ */ _react2.default.createElement(Flex, { ...props, direction: "horizontal" });
+Row.displayName = "Row";
+
+// src/components/view/expanded/expanded.tsx
+
 
-var Row = ({
+var Expanded = ({
   children,
-  mainAxisAlignment,
-  crossAxisAlignment,
-  spacing,
-  reverse = false,
-  fullWidth,
-  style
-}) => {
-  const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        {
-          flexDirection: reverse ? "row-reverse" : "row",
-          justifyContent: resolveMainAxisAlignment(mainAxisAlignment),
-          alignItems: resolveCrossAxisAlignment(crossAxisAlignment)
-        },
-        fullWidthStyle,
-        gapStyle,
-        style
-      ]
-    },
-    children
-  );
-};
+  flex = 1,
+  style,
+  testID
+}) => /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { testID, style: [{ flex }, style] }, children);
+Expanded.displayName = "Expanded";
+
+// src/components/view/flexible/flexible.tsx
+
+
+var Flexible = ({
+  children,
+  flex = 1,
+  fit = "loose",
+  style,
+  testID
+}) => /* @__PURE__ */ _react2.default.createElement(
+  _reactnative.View,
+  {
+    testID,
+    style: [
+      fit === "tight" ? { flex } : { flexGrow: flex, flexShrink: 1, flexBasis: "auto" },
+      style
+    ]
+  },
+  children
+);
+Flexible.displayName = "Flexible";
 
 // src/components/view/spacer/spacer.tsx
 
@@ -316,6 +333,39 @@ var Spacer = ({ flex = 1, style }) => {
 };
 Spacer.displayName = "Spacer";
 
+// src/components/view/wrap/wrap.tsx
+
+
+var Wrap = ({
+  children,
+  direction = "horizontal",
+  alignment,
+  runAlignment,
+  spacing = 0,
+  runSpacing = 0,
+  style,
+  testID
+}) => /* @__PURE__ */ _react2.default.createElement(
+  _reactnative.View,
+  {
+    testID,
+    style: [
+      {
+        flexDirection: direction === "horizontal" ? "row" : "column",
+        flexWrap: "wrap",
+        justifyContent: resolveMainAxisAlignment(alignment),
+        alignContent: resolveMainAxisAlignment(runAlignment),
+        gap: spacing,
+        rowGap: direction === "horizontal" ? runSpacing : spacing,
+        columnGap: direction === "horizontal" ? spacing : runSpacing
+      },
+      style
+    ]
+  },
+  children
+);
+Wrap.displayName = "Wrap";
+
 // src/components/view/padding/padding.tsx
 
 
@@ -341,7 +391,14 @@ var SizedBox = ({
   testID
 }) => {
   if (shrink) {
-    return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { testID, style: [{ width: 0, height: 0, overflow: "hidden" }, style] }, children);
+    return /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.View,
+      {
+        testID,
+        style: [{ width: 0, height: 0, overflow: "hidden" }, style]
+      },
+      children
+    );
   }
   if (expand) {
     return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { testID, style: [{ flex: 1, alignSelf: "stretch" }, style] }, children);
@@ -634,7 +691,10 @@ var Screen = ({
 }) => {
   const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const resolvedBackgroundColor = _nullishCoalesce(backgroundColor, () => ( theme.colors.background));
-  const containerStyle = [{ flex: 1, backgroundColor: resolvedBackgroundColor, padding }, style];
+  const containerStyle = [
+    { flex: 1, backgroundColor: resolvedBackgroundColor, padding },
+    style
+  ];
   if (safeArea) {
     return /* @__PURE__ */ _react2.default.createElement(_reactnativesafeareacontext.SafeAreaView, { style: containerStyle }, children);
   }
@@ -1294,4 +1354,8 @@ MasonryGridBuilder.displayName = "MasonryGridBuilder";
 
 
 
-exports.Align = Align; exports.AspectRatio = AspectRatio; exports.BlurView = BlurView; exports.Center = Center; exports.Column = Column; exports.ConditionalView = ConditionalView; exports.ConstrainedBox = ConstrainedBox; exports.Container = Container; exports.FractionallySizedBox = FractionallySizedBox; exports.Grid = Grid; exports.GridBuilder = GridBuilder; exports.GridItem = GridItem; exports.Margin = Margin; exports.MasonryGrid = MasonryGrid; exports.MasonryGridBuilder = MasonryGridBuilder; exports.MasonryGridItem = MasonryGridItem; exports.Padding = Padding; exports.PositionedView = PositionedView; exports.RoundedView = RoundedView; exports.Row = Row; exports.Screen = Screen; exports.SizedBox = SizedBox; exports.Spacer = Spacer; exports.Surface = Surface;
+
+
+
+
+exports.Align = Align; exports.AspectRatio = AspectRatio; exports.BlurView = BlurView; exports.Center = Center; exports.Column = Column; exports.ConditionalView = ConditionalView; exports.ConstrainedBox = ConstrainedBox; exports.Container = Container; exports.Expanded = Expanded; exports.Flex = Flex; exports.Flexible = Flexible; exports.FractionallySizedBox = FractionallySizedBox; exports.Grid = Grid; exports.GridBuilder = GridBuilder; exports.GridItem = GridItem; exports.Margin = Margin; exports.MasonryGrid = MasonryGrid; exports.MasonryGridBuilder = MasonryGridBuilder; exports.MasonryGridItem = MasonryGridItem; exports.Padding = Padding; exports.PositionedView = PositionedView; exports.RoundedView = RoundedView; exports.Row = Row; exports.Screen = Screen; exports.SizedBox = SizedBox; exports.Spacer = Spacer; exports.Surface = Surface; exports.Wrap = Wrap;

package/dist/view/index.d.cts

@@ -68,54 +68,96 @@ type ContainerProps = {
 
 declare const Container: React.FC<ContainerProps>;
 
-type MainAxisAlignment = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
-type CrossAxisAlignment = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-type RowProps = {
-    /**
-     * The content to render inside the row.
-     */
-    children: ReactNode;
-    /**
-     * Main axis alignment for row items.
-     * @default 'start'
-     */
+type MainAxisAlignment = 'start' | 'end' | 'center' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly';
+type CrossAxisAlignment = 'start' | 'end' | 'center' | 'stretch';
+/** Controls how much space the flex widget occupies in its main axis. */
+type MainAxisSize = 'min' | 'max';
+type Direction = 'horizontal' | 'vertical';
+type FlexProps = {
+    /** Content to render inside the flex container. */
+    children?: ReactNode;
+    /** Axis direction — `'horizontal'` for row, `'vertical'` for column. */
+    direction: Direction;
+    /** How to place children along the main axis. @default 'start' */
     mainAxisAlignment?: MainAxisAlignment;
-    /**
-     * Cross axis alignment for row items.
-     * @default 'center'
-     */
+    /** How to place children along the cross axis. @default 'center' */
     crossAxisAlignment?: CrossAxisAlignment;
-    /**
-     * Spacing between children.
-     */
-    spacing?: number;
-    /**
-     * Reverse the row direction.
-     * @default false
-     */
-    reverse?: boolean;
-    /**
-     * Force the container to take the full width.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Custom style for the row container.
-     */
+    /** Whether the flex takes max or min space in the main axis. @default 'max' */
+    mainAxisSize?: MainAxisSize;
+    /** Wrap children onto multiple lines when they overflow. @default false */
+    wrap?: boolean;
+    /** Gap in logical pixels between children. */
+    gap?: number;
+    /** Reverse the layout direction. @default false */
+    reversed?: boolean;
+    /** Flex factor applied to the container itself. */
+    flex?: number;
+    /** Raw style override applied to the underlying View. */
     style?: StyleProp<ViewStyle>;
+    /** Test identifier for e2e tests. */
+    testID?: string;
 };
-type ColumnProps = RowProps & {
+type RowProps = Omit<FlexProps, 'direction'>;
+type ColumnProps = Omit<FlexProps, 'direction'>;
+/** Controls how a `Flexible` child sizes itself within available space. */
+type FlexFit = 'tight' | 'loose';
+type FlexibleProps = {
+    /** Content to render inside the flexible container. */
+    children?: ReactNode;
+    /** Flex factor — how much space to claim relative to siblings. @default 1 */
+    flex?: number;
     /**
-     * If true, the container will grow to fill available space.
-     * @default false
+     * Sizing behaviour:
+     * - `'tight'` — force the child to fill all allotted space (like `Expanded`).
+     * - `'loose'` — allow the child to be at most the allotted size but no larger.
+     * @default 'loose'
      */
-    noGrowth?: boolean;
+    fit?: FlexFit;
+    /** Raw style override applied to the underlying View. */
+    style?: StyleProp<ViewStyle>;
+    /** Test identifier for e2e tests. */
+    testID?: string;
+};
+type WrapProps = {
+    /** Content to render inside the wrap container. */
+    children?: ReactNode;
+    /** Primary axis direction. @default 'horizontal' */
+    direction?: Direction;
+    /** Alignment of children along the main axis within each run. @default 'start' */
+    alignment?: MainAxisAlignment;
+    /** Alignment of runs along the cross axis. @default 'start' */
+    runAlignment?: MainAxisAlignment;
+    /** Space between children along the main axis. @default 0 */
+    spacing?: number;
+    /** Space between runs along the cross axis. @default 0 */
+    runSpacing?: number;
+    /** Raw style override applied to the underlying View. */
+    style?: StyleProp<ViewStyle>;
+    /** Test identifier for e2e tests. */
+    testID?: string;
 };
 
+declare const Flex: React.FC<FlexProps>;
+
 declare const Column: React.FC<ColumnProps>;
 
 declare const Row: React.FC<RowProps>;
 
+type ExpandedProps = {
+    /** Content to render inside the expanded container. */
+    children?: ReactNode;
+    /** Flex factor — how much of the available space to take relative to siblings. @default 1 */
+    flex?: number;
+    /** Raw style override applied to the underlying View. */
+    style?: StyleProp<ViewStyle>;
+    /** Test identifier for e2e tests. */
+    testID?: string;
+};
+
+declare const Expanded: React.FC<ExpandedProps>;
+
+declare const Flexible: React.FC<FlexibleProps>;
+
 type SpacerProps = {
     /**
      * Flex factor for the spacer.
@@ -130,6 +172,8 @@ type SpacerProps = {
 
 declare const Spacer: React.FC<SpacerProps>;
 
+declare const Wrap: React.FC<WrapProps>;
+
 type PaddingProps = {
     /** Content to render inside the padding container. */
     children?: ReactNode;
@@ -786,4 +830,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { Align, type AlignProps, AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, type BoxConstraints, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, ConstrainedBox, type ConstrainedBoxProps, Container, type ContainerProps, type CrossAxisAlignment, FractionallySizedBox, type FractionallySizedBoxProps, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, Screen, type ScreenProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };
+export { Align, type AlignProps, AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, type BoxConstraints, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, ConstrainedBox, type ConstrainedBoxProps, Container, type ContainerProps, type CrossAxisAlignment, type Direction, Expanded, type ExpandedProps, Flex, type FlexFit, type FlexProps, Flexible, type FlexibleProps, FractionallySizedBox, type FractionallySizedBoxProps, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, type MainAxisSize, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, Screen, type ScreenProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor, Wrap, type WrapProps };

package/dist/view/index.d.ts

@@ -68,54 +68,96 @@ type ContainerProps = {
 
 declare const Container: React.FC<ContainerProps>;
 
-type MainAxisAlignment = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
-type CrossAxisAlignment = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-type RowProps = {
-    /**
-     * The content to render inside the row.
-     */
-    children: ReactNode;
-    /**
-     * Main axis alignment for row items.
-     * @default 'start'
-     */
+type MainAxisAlignment = 'start' | 'end' | 'center' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly';
+type CrossAxisAlignment = 'start' | 'end' | 'center' | 'stretch';
+/** Controls how much space the flex widget occupies in its main axis. */
+type MainAxisSize = 'min' | 'max';
+type Direction = 'horizontal' | 'vertical';
+type FlexProps = {
+    /** Content to render inside the flex container. */
+    children?: ReactNode;
+    /** Axis direction — `'horizontal'` for row, `'vertical'` for column. */
+    direction: Direction;
+    /** How to place children along the main axis. @default 'start' */
     mainAxisAlignment?: MainAxisAlignment;
-    /**
-     * Cross axis alignment for row items.
-     * @default 'center'
-     */
+    /** How to place children along the cross axis. @default 'center' */
     crossAxisAlignment?: CrossAxisAlignment;
-    /**
-     * Spacing between children.
-     */
-    spacing?: number;
-    /**
-     * Reverse the row direction.
-     * @default false
-     */
-    reverse?: boolean;
-    /**
-     * Force the container to take the full width.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Custom style for the row container.
-     */
+    /** Whether the flex takes max or min space in the main axis. @default 'max' */
+    mainAxisSize?: MainAxisSize;
+    /** Wrap children onto multiple lines when they overflow. @default false */
+    wrap?: boolean;
+    /** Gap in logical pixels between children. */
+    gap?: number;
+    /** Reverse the layout direction. @default false */
+    reversed?: boolean;
+    /** Flex factor applied to the container itself. */
+    flex?: number;
+    /** Raw style override applied to the underlying View. */
     style?: StyleProp<ViewStyle>;
+    /** Test identifier for e2e tests. */
+    testID?: string;
 };
-type ColumnProps = RowProps & {
+type RowProps = Omit<FlexProps, 'direction'>;
+type ColumnProps = Omit<FlexProps, 'direction'>;
+/** Controls how a `Flexible` child sizes itself within available space. */
+type FlexFit = 'tight' | 'loose';
+type FlexibleProps = {
+    /** Content to render inside the flexible container. */
+    children?: ReactNode;
+    /** Flex factor — how much space to claim relative to siblings. @default 1 */
+    flex?: number;
     /**
-     * If true, the container will grow to fill available space.
-     * @default false
+     * Sizing behaviour:
+     * - `'tight'` — force the child to fill all allotted space (like `Expanded`).
+     * - `'loose'` — allow the child to be at most the allotted size but no larger.
+     * @default 'loose'
      */
-    noGrowth?: boolean;
+    fit?: FlexFit;
+    /** Raw style override applied to the underlying View. */
+    style?: StyleProp<ViewStyle>;
+    /** Test identifier for e2e tests. */
+    testID?: string;
+};
+type WrapProps = {
+    /** Content to render inside the wrap container. */
+    children?: ReactNode;
+    /** Primary axis direction. @default 'horizontal' */
+    direction?: Direction;
+    /** Alignment of children along the main axis within each run. @default 'start' */
+    alignment?: MainAxisAlignment;
+    /** Alignment of runs along the cross axis. @default 'start' */
+    runAlignment?: MainAxisAlignment;
+    /** Space between children along the main axis. @default 0 */
+    spacing?: number;
+    /** Space between runs along the cross axis. @default 0 */
+    runSpacing?: number;
+    /** Raw style override applied to the underlying View. */
+    style?: StyleProp<ViewStyle>;
+    /** Test identifier for e2e tests. */
+    testID?: string;
 };
 
+declare const Flex: React.FC<FlexProps>;
+
 declare const Column: React.FC<ColumnProps>;
 
 declare const Row: React.FC<RowProps>;
 
+type ExpandedProps = {
+    /** Content to render inside the expanded container. */
+    children?: ReactNode;
+    /** Flex factor — how much of the available space to take relative to siblings. @default 1 */
+    flex?: number;
+    /** Raw style override applied to the underlying View. */
+    style?: StyleProp<ViewStyle>;
+    /** Test identifier for e2e tests. */
+    testID?: string;
+};
+
+declare const Expanded: React.FC<ExpandedProps>;
+
+declare const Flexible: React.FC<FlexibleProps>;
+
 type SpacerProps = {
     /**
      * Flex factor for the spacer.
@@ -130,6 +172,8 @@ type SpacerProps = {
 
 declare const Spacer: React.FC<SpacerProps>;
 
+declare const Wrap: React.FC<WrapProps>;
+
 type PaddingProps = {
     /** Content to render inside the padding container. */
     children?: ReactNode;
@@ -786,4 +830,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { Align, type AlignProps, AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, type BoxConstraints, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, ConstrainedBox, type ConstrainedBoxProps, Container, type ContainerProps, type CrossAxisAlignment, FractionallySizedBox, type FractionallySizedBoxProps, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, Screen, type ScreenProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };
+export { Align, type AlignProps, AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, type BoxConstraints, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, ConstrainedBox, type ConstrainedBoxProps, Container, type ContainerProps, type CrossAxisAlignment, type Direction, Expanded, type ExpandedProps, Flex, type FlexFit, type FlexProps, Flexible, type FlexibleProps, FractionallySizedBox, type FractionallySizedBoxProps, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, type MainAxisSize, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, Screen, type ScreenProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor, Wrap, type WrapProps };