@xaui/native 0.2.6 → 0.2.7

package/dist/view/index.js

@@ -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
 import React2 from "react";
 import { View as View2 } from "react-native";
 
@@ -214,94 +216,109 @@ 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"
+  stretch: "stretch"
 };
-var resolveMainAxisAlignment = (alignment) => {
-  return MAIN_AXIS_JUSTIFY_MAP[alignment ?? "start"];
-};
-var resolveCrossAxisAlignment = (alignment) => {
-  return CROSS_AXIS_ALIGN_MAP[alignment ?? "center"];
+var resolveMainAxisAlignment = (alignment) => MAIN_AXIS_JUSTIFY_MAP[alignment ?? "start"];
+var resolveCrossAxisAlignment = (alignment) => CROSS_AXIS_ALIGN_MAP[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.createElement(
     View2,
     {
+      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/row/row.tsx
+// src/components/view/column/column.tsx
 import React3 from "react";
+var Column = (props) => /* @__PURE__ */ React3.createElement(Flex, { ...props, direction: "vertical" });
+Column.displayName = "Column";
+
+// src/components/view/row/row.tsx
+import React4 from "react";
+var Row = (props) => /* @__PURE__ */ React4.createElement(Flex, { ...props, direction: "horizontal" });
+Row.displayName = "Row";
+
+// src/components/view/expanded/expanded.tsx
+import React5 from "react";
 import { View as View3 } from "react-native";
-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__ */ React3.createElement(
-    View3,
-    {
-      style: [
-        {
-          flexDirection: reverse ? "row-reverse" : "row",
-          justifyContent: resolveMainAxisAlignment(mainAxisAlignment),
-          alignItems: resolveCrossAxisAlignment(crossAxisAlignment)
-        },
-        fullWidthStyle,
-        gapStyle,
-        style
-      ]
-    },
-    children
-  );
-};
+  flex = 1,
+  style,
+  testID
+}) => /* @__PURE__ */ React5.createElement(View3, { testID, style: [{ flex }, style] }, children);
+Expanded.displayName = "Expanded";
 
-// src/components/view/spacer/spacer.tsx
-import React4 from "react";
+// src/components/view/flexible/flexible.tsx
+import React6 from "react";
 import { View as View4 } from "react-native";
+var Flexible = ({
+  children,
+  flex = 1,
+  fit = "loose",
+  style,
+  testID
+}) => /* @__PURE__ */ React6.createElement(
+  View4,
+  {
+    testID,
+    style: [
+      fit === "tight" ? { flex } : { flexGrow: flex, flexShrink: 1, flexBasis: "auto" },
+      style
+    ]
+  },
+  children
+);
+Flexible.displayName = "Flexible";
+
+// src/components/view/spacer/spacer.tsx
+import React7 from "react";
+import { View as View5 } from "react-native";
 var Spacer = ({ flex = 1, style }) => {
-  return /* @__PURE__ */ React4.createElement(
-    View4,
+  return /* @__PURE__ */ React7.createElement(
+    View5,
     {
       style: [
         {
@@ -316,21 +333,54 @@ var Spacer = ({ flex = 1, style }) => {
 };
 Spacer.displayName = "Spacer";
 
+// src/components/view/wrap/wrap.tsx
+import React8 from "react";
+import { View as View6 } from "react-native";
+var Wrap = ({
+  children,
+  direction = "horizontal",
+  alignment,
+  runAlignment,
+  spacing = 0,
+  runSpacing = 0,
+  style,
+  testID
+}) => /* @__PURE__ */ React8.createElement(
+  View6,
+  {
+    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
-import React5 from "react";
-import { View as View5 } from "react-native";
-var Padding = ({ children, padding, style }) => /* @__PURE__ */ React5.createElement(View5, { style: [resolveEdgeInsets(padding, "padding"), style] }, children);
+import React9 from "react";
+import { View as View7 } from "react-native";
+var Padding = ({ children, padding, style }) => /* @__PURE__ */ React9.createElement(View7, { style: [resolveEdgeInsets(padding, "padding"), style] }, children);
 Padding.displayName = "Padding";
 
 // src/components/view/margin/margin.tsx
-import React6 from "react";
-import { View as View6 } from "react-native";
-var Margin = ({ children, margin, style }) => /* @__PURE__ */ React6.createElement(View6, { style: [resolveEdgeInsets(margin, "margin"), style] }, children);
+import React10 from "react";
+import { View as View8 } from "react-native";
+var Margin = ({ children, margin, style }) => /* @__PURE__ */ React10.createElement(View8, { style: [resolveEdgeInsets(margin, "margin"), style] }, children);
 Margin.displayName = "Margin";
 
 // src/components/view/sized-box/sized-box.tsx
-import React7 from "react";
-import { View as View7 } from "react-native";
+import React11 from "react";
+import { View as View9 } from "react-native";
 var SizedBox = ({
   children,
   width,
@@ -341,25 +391,32 @@ var SizedBox = ({
   testID
 }) => {
   if (shrink) {
-    return /* @__PURE__ */ React7.createElement(View7, { testID, style: [{ width: 0, height: 0, overflow: "hidden" }, style] }, children);
+    return /* @__PURE__ */ React11.createElement(
+      View9,
+      {
+        testID,
+        style: [{ width: 0, height: 0, overflow: "hidden" }, style]
+      },
+      children
+    );
   }
   if (expand) {
-    return /* @__PURE__ */ React7.createElement(View7, { testID, style: [{ flex: 1, alignSelf: "stretch" }, style] }, children);
+    return /* @__PURE__ */ React11.createElement(View9, { testID, style: [{ flex: 1, alignSelf: "stretch" }, style] }, children);
   }
-  return /* @__PURE__ */ React7.createElement(View7, { testID, style: [{ width, height }, style] }, children);
+  return /* @__PURE__ */ React11.createElement(View9, { testID, style: [{ width, height }, style] }, children);
 };
 SizedBox.displayName = "SizedBox";
 
 // src/components/view/constrained-box/constrained-box.tsx
-import React8 from "react";
-import { View as View8 } from "react-native";
+import React12 from "react";
+import { View as View10 } from "react-native";
 var ConstrainedBox = ({
   children,
   constraints,
   style,
   testID
-}) => /* @__PURE__ */ React8.createElement(
-  View8,
+}) => /* @__PURE__ */ React12.createElement(
+  View10,
   {
     testID,
     style: [
@@ -377,8 +434,8 @@ var ConstrainedBox = ({
 ConstrainedBox.displayName = "ConstrainedBox";
 
 // src/components/view/fractionally-sized-box/fractionally-sized-box.tsx
-import React9 from "react";
-import { View as View9 } from "react-native";
+import React13 from "react";
+import { View as View11 } from "react-native";
 var FractionallySizedBox = ({
   children,
   widthFactor,
@@ -391,13 +448,13 @@ var FractionallySizedBox = ({
   if (widthFactor !== void 0) sizedStyle.width = `${widthFactor * 100}%`;
   if (heightFactor !== void 0) sizedStyle.height = `${heightFactor * 100}%`;
   const alignStyle = alignment ? resolveAlignment(alignment) : {};
-  return /* @__PURE__ */ React9.createElement(View9, { testID, style: [sizedStyle, alignStyle, style] }, children);
+  return /* @__PURE__ */ React13.createElement(View11, { testID, style: [sizedStyle, alignStyle, style] }, children);
 };
 FractionallySizedBox.displayName = "FractionallySizedBox";
 
 // src/components/view/positioned-view/positioned-view.tsx
-import React10 from "react";
-import { View as View10 } from "react-native";
+import React14 from "react";
+import { View as View12 } from "react-native";
 var PositionedView = ({
   children,
   top,
@@ -407,8 +464,8 @@ var PositionedView = ({
   zIndex,
   style
 }) => {
-  return /* @__PURE__ */ React10.createElement(
-    View10,
+  return /* @__PURE__ */ React14.createElement(
+    View12,
     {
       style: [
         {
@@ -428,8 +485,8 @@ var PositionedView = ({
 PositionedView.displayName = "PositionedView";
 
 // src/components/view/blur-view/blur-view.tsx
-import React11, { useEffect, useRef } from "react";
-import { Animated, StyleSheet, View as View11 } from "react-native";
+import React15, { useEffect, useRef } from "react";
+import { Animated, StyleSheet, View as View13 } from "react-native";
 var styles = StyleSheet.create({
   container: {
     position: "relative"
@@ -469,20 +526,20 @@ var BlurView = ({
     overlayAnim.setValue(overlayOpacity);
     scaleAnim.setValue(0.98);
   }, [overlayAnim, overlayOpacity, scaleAnim, unlockable]);
-  return /* @__PURE__ */ React11.createElement(View11, { style: [styles.container, style] }, /* @__PURE__ */ React11.createElement(Animated.View, { style: { transform: [{ scale: scaleAnim }] } }, children), /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React15.createElement(View13, { style: [styles.container, style] }, /* @__PURE__ */ React15.createElement(Animated.View, { style: { transform: [{ scale: scaleAnim }] } }, children), /* @__PURE__ */ React15.createElement(
     Animated.View,
     {
       pointerEvents: unlockable ? "none" : "auto",
       style: [styles.overlay, { opacity: overlayAnim }]
     },
-    /* @__PURE__ */ React11.createElement(View11, { style: [styles.overlay, { backgroundColor: overlayColor }] })
+    /* @__PURE__ */ React15.createElement(View13, { style: [styles.overlay, { backgroundColor: overlayColor }] })
   ));
 };
 BlurView.displayName = "BlurView";
 
 // src/components/view/rounded-view/rounded-view.tsx
-import React12 from "react";
-import { View as View12 } from "react-native";
+import React16 from "react";
+import { View as View14 } from "react-native";
 
 // src/components/view/rounded-view/rounded-view.hook.ts
 import { useMemo } from "react";
@@ -536,8 +593,8 @@ var RoundedView = ({
     bottomLeft,
     bottomRight
   });
-  return /* @__PURE__ */ React12.createElement(
-    View12,
+  return /* @__PURE__ */ React16.createElement(
+    View14,
     {
       style: [
         borderRadiusStyle,
@@ -552,8 +609,8 @@ var RoundedView = ({
 };
 
 // src/components/view/aspect-ratio/aspect-ratio.tsx
-import React13 from "react";
-import { View as View13 } from "react-native";
+import React17 from "react";
+import { View as View15 } from "react-native";
 var AspectRatio = ({
   children,
   ratio,
@@ -563,8 +620,8 @@ var AspectRatio = ({
   testID
 }) => {
   const alignStyle = alignment ? resolveAlignment(alignment) : {};
-  return /* @__PURE__ */ React13.createElement(
-    View13,
+  return /* @__PURE__ */ React17.createElement(
+    View15,
     {
       testID,
       style: [
@@ -582,8 +639,8 @@ var AspectRatio = ({
 AspectRatio.displayName = "AspectRatio";
 
 // src/components/view/surface/surface.tsx
-import React14 from "react";
-import { View as View14 } from "react-native";
+import React18 from "react";
+import { View as View16 } from "react-native";
 import { getSafeThemeColor } from "@xaui/core";
 var resolveBackgroundColor = (color, theme) => {
   if (color === "background" || color === "foreground") {
@@ -603,8 +660,8 @@ var Surface = ({
   const theme = useXUITheme();
   const radiusStyle = useBorderRadiusStyles(radius);
   const background = resolveBackgroundColor(themeColor, theme);
-  return /* @__PURE__ */ React14.createElement(
-    View14,
+  return /* @__PURE__ */ React18.createElement(
+    View16,
     {
       style: [
         radiusStyle,
@@ -622,8 +679,8 @@ var Surface = ({
 Surface.displayName = "Surface";
 
 // src/components/view/screen/screen.tsx
-import React15 from "react";
-import { View as View15 } from "react-native";
+import React19 from "react";
+import { View as View17 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 var Screen = ({
   children,
@@ -634,36 +691,39 @@ var Screen = ({
 }) => {
   const theme = useXUITheme();
   const resolvedBackgroundColor = backgroundColor ?? theme.colors.background;
-  const containerStyle = [{ flex: 1, backgroundColor: resolvedBackgroundColor, padding }, style];
+  const containerStyle = [
+    { flex: 1, backgroundColor: resolvedBackgroundColor, padding },
+    style
+  ];
   if (safeArea) {
-    return /* @__PURE__ */ React15.createElement(SafeAreaView, { style: containerStyle }, children);
+    return /* @__PURE__ */ React19.createElement(SafeAreaView, { style: containerStyle }, children);
   }
-  return /* @__PURE__ */ React15.createElement(View15, { style: containerStyle }, children);
+  return /* @__PURE__ */ React19.createElement(View17, { style: containerStyle }, children);
 };
 Screen.displayName = "Screen";
 
 // src/components/view/align/align.tsx
-import React16 from "react";
-import { View as View16 } from "react-native";
-var Align = ({ children, alignment, style }) => /* @__PURE__ */ React16.createElement(View16, { style: [{ flex: 1 }, resolveAlignment(alignment), style] }, children);
+import React20 from "react";
+import { View as View18 } from "react-native";
+var Align = ({ children, alignment, style }) => /* @__PURE__ */ React20.createElement(View18, { style: [{ flex: 1 }, resolveAlignment(alignment), style] }, children);
 Align.displayName = "Align";
 
 // src/components/view/center/center.tsx
-import React17 from "react";
-var Center = ({ children, style }) => /* @__PURE__ */ React17.createElement(Align, { alignment: "center", style }, children);
+import React21 from "react";
+var Center = ({ children, style }) => /* @__PURE__ */ React21.createElement(Align, { alignment: "center", style }, children);
 Center.displayName = "Center";
 
 // src/components/view/grid/grid.tsx
-import React19, { useMemo as useMemo2, useState } from "react";
+import React23, { useMemo as useMemo2, useState } from "react";
 import {
-  View as View18
+  View as View20
 } from "react-native";
 
 // src/components/view/grid/grid-item.tsx
-import React18 from "react";
-import { View as View17 } from "react-native";
+import React22 from "react";
+import { View as View19 } from "react-native";
 var GridItem = ({ children, style }) => {
-  return /* @__PURE__ */ React18.createElement(View17, { style }, children);
+  return /* @__PURE__ */ React22.createElement(View19, { style }, children);
 };
 GridItem.displayName = "GridItem";
 
@@ -677,7 +737,7 @@ var getSafeSpan = (span, columns) => {
   return Math.min(Math.floor(span), columns);
 };
 var isGridItemElement = (child) => {
-  if (!React19.isValidElement(child)) return false;
+  if (!React23.isValidElement(child)) return false;
   if (child.type === GridItem) return true;
   const displayName = child.type.displayName;
   return displayName === "GridItem";
@@ -696,15 +756,15 @@ var Grid = ({
   const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
   const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
   const itemWidth = `${100 / safeColumns}%`;
-  const items = React19.Children.toArray(children);
+  const items = React23.Children.toArray(children);
   const totalColumnGap = resolvedColumnSpacing * (safeColumns - 1);
   const baseItemWidth = useMemo2(() => {
     if (!containerWidth) return void 0;
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
   let currentColumn = 0;
-  return /* @__PURE__ */ React19.createElement(
-    View18,
+  return /* @__PURE__ */ React23.createElement(
+    View20,
     {
       style: [
         {
@@ -721,7 +781,7 @@ var Grid = ({
       }
     },
     items.map((child, index) => {
-      const key = React19.isValidElement(child) && child.key ? child.key : `grid-${index}`;
+      const key = React23.isValidElement(child) && child.key ? child.key : `grid-${index}`;
       const span = isGridItemElement(child) ? getSafeSpan(child.props.span, safeColumns) : 1;
       const spanWidth = baseItemWidth === void 0 ? `${100 / safeColumns * span}%` : baseItemWidth * span + resolvedColumnSpacing * (span - 1);
       if (currentColumn + span > safeColumns) {
@@ -741,7 +801,7 @@ var Grid = ({
           itemStyle,
           child.props.style
         ];
-        const element2 = React19.cloneElement(child, {
+        const element2 = React23.cloneElement(child, {
           key,
           style: mergedStyle
         });
@@ -749,8 +809,8 @@ var Grid = ({
         return element2;
       }
       const defaultItemWidth = baseItemWidth === void 0 ? itemWidth : baseItemWidth;
-      const element = /* @__PURE__ */ React19.createElement(
-        View18,
+      const element = /* @__PURE__ */ React23.createElement(
+        View20,
         {
           key,
           style: [
@@ -773,11 +833,11 @@ var Grid = ({
 };
 
 // src/components/view/grid/grid-builder.tsx
-import React20, { useMemo as useMemo3 } from "react";
+import React24, { useMemo as useMemo3 } from "react";
 import {
   FlatList,
   StyleSheet as StyleSheet2,
-  View as View19
+  View as View21
 } from "react-native";
 var getSafeColumns2 = (columns) => {
   if (!columns || columns <= 0) return 1;
@@ -864,7 +924,7 @@ var GridBuilder = ({
         },
         itemStyle
       ];
-      return /* @__PURE__ */ React20.createElement(View19, { style: placeholderStyle, pointerEvents: "none" });
+      return /* @__PURE__ */ React24.createElement(View21, { style: placeholderStyle, pointerEvents: "none" });
     }
     const element = resolvedRenderer({ item: item.item, index: item.index });
     if (element === null) return null;
@@ -880,7 +940,7 @@ var GridBuilder = ({
       },
       itemStyle
     ];
-    return /* @__PURE__ */ React20.createElement(View19, { style: wrapperStyle }, element);
+    return /* @__PURE__ */ React24.createElement(View21, { style: wrapperStyle }, element);
   };
   const flattenedStyle = StyleSheet2.flatten(style) ?? {};
   const {
@@ -901,7 +961,7 @@ var GridBuilder = ({
     ...columnGap !== void 0 ? { columnGap } : {}
   };
   const hasLayoutStyle = Object.keys(layoutStyle).length > 0;
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React24.createElement(
     FlatList,
     {
       data: paddedData,
@@ -921,7 +981,7 @@ var GridBuilder = ({
 GridBuilder.displayName = "GridBuilder";
 
 // src/components/view/conditional/conditional-view.tsx
-import React21, { useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
+import React25, { useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
 import { Animated as Animated3 } from "react-native";
 
 // src/components/view/conditional/conditional-view.utils.ts
@@ -1073,18 +1133,18 @@ var ConditionalView = ({
   if (!shouldRender) {
     return null;
   }
-  return /* @__PURE__ */ React21.createElement(Animated3.View, { style: animatedStyle }, children);
+  return /* @__PURE__ */ React25.createElement(Animated3.View, { style: animatedStyle }, children);
 };
 
 // src/components/view/masonry-grid/masonry-grid.tsx
-import React22, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
-import { View as View20 } from "react-native";
+import React26, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
+import { View as View22 } from "react-native";
 var getSafeColumns3 = (columns) => {
   if (!columns || columns <= 0) return 1;
   return Math.floor(columns);
 };
 var getItemKey = (child, index) => {
-  return React22.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
+  return React26.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
 };
 var MasonryGrid = ({
   children,
@@ -1107,7 +1167,7 @@ var MasonryGrid = ({
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
   const items = useMemo5(
-    () => React22.Children.toArray(children).map((child, index) => ({
+    () => React26.Children.toArray(children).map((child, index) => ({
       key: getItemKey(child, index),
       element: child
     })),
@@ -1124,8 +1184,8 @@ var MasonryGrid = ({
     });
     return buckets;
   }, [items, layoutVersion, resolvedRowSpacing, safeColumns]);
-  return /* @__PURE__ */ React22.createElement(
-    View20,
+  return /* @__PURE__ */ React26.createElement(
+    View22,
     {
       style: [
         {
@@ -1148,10 +1208,10 @@ var MasonryGrid = ({
         },
         columnStyle
       ];
-      return /* @__PURE__ */ React22.createElement(View20, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
+      return /* @__PURE__ */ React26.createElement(View22, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
         const isLastRow = index === column.length - 1;
-        return /* @__PURE__ */ React22.createElement(
-          View20,
+        return /* @__PURE__ */ React26.createElement(
+          View22,
           {
             key: item.key,
             style: { marginBottom: isLastRow ? 0 : resolvedRowSpacing },
@@ -1170,18 +1230,18 @@ var MasonryGrid = ({
 };
 
 // src/components/view/masonry-grid/masonry-grid-item.tsx
-import React23 from "react";
-import { View as View21 } from "react-native";
+import React27 from "react";
+import { View as View23 } from "react-native";
 var MasonryGridItem = ({
   children,
   style
 }) => {
-  return /* @__PURE__ */ React23.createElement(View21, { style }, children);
+  return /* @__PURE__ */ React27.createElement(View23, { style }, children);
 };
 MasonryGridItem.displayName = "MasonryGridItem";
 
 // src/components/view/masonry-grid/masonry-grid-builder.tsx
-import React24, { useMemo as useMemo6, useRef as useRef4 } from "react";
+import React28, { useMemo as useMemo6, useRef as useRef4 } from "react";
 import {
   ScrollView
 } from "react-native";
@@ -1241,7 +1301,7 @@ var MasonryGridBuilder = ({
       onEndReached();
     }
   };
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React28.createElement(
     ScrollView,
     {
       scrollEventThrottle: 16,
@@ -1253,7 +1313,7 @@ var MasonryGridBuilder = ({
       onScroll: handleScroll
     },
     header,
-    /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React28.createElement(
       MasonryGrid,
       {
         columns,
@@ -1263,7 +1323,7 @@ var MasonryGridBuilder = ({
         style: [{ width: "100%" }, style],
         columnStyle
       },
-      resolvedData.map((item, index) => /* @__PURE__ */ React24.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
+      resolvedData.map((item, index) => /* @__PURE__ */ React28.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
     ),
     footer
   );
@@ -1278,6 +1338,9 @@ export {
   ConditionalView,
   ConstrainedBox,
   Container,
+  Expanded,
+  Flex,
+  Flexible,
   FractionallySizedBox,
   Grid,
   GridBuilder,
@@ -1293,5 +1356,6 @@ export {
   Screen,
   SizedBox,
   Spacer,
-  Surface
+  Surface,
+  Wrap
 };