@xaui/native 0.2.5 → 0.2.7

package/dist/view/index.js

@@ -4,103 +4,321 @@ import {
   useXUITheme
 } from "../chunk-RBSA4NH4.js";
 
-// src/components/view/column/column.tsx
+// src/components/view/container/container.tsx
 import React from "react";
-import { View } from "react-native";
+import { View, Pressable } from "react-native";
 
-// src/components/view/layout-utils.ts
-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"
+// src/components/view/container/container.utils.ts
+var resolveEdgeInsets = (value, prefix) => {
+  if (typeof value === "number") {
+    return prefix === "padding" ? { padding: value } : { margin: value };
+  }
+  const style = {};
+  if (prefix === "padding") {
+    if (value.horizontal !== void 0) style.paddingHorizontal = value.horizontal;
+    if (value.vertical !== void 0) style.paddingVertical = value.vertical;
+    if (value.top !== void 0) style.paddingTop = value.top;
+    if (value.bottom !== void 0) style.paddingBottom = value.bottom;
+    if (value.left !== void 0) style.paddingLeft = value.left;
+    if (value.right !== void 0) style.paddingRight = value.right;
+  } else {
+    if (value.horizontal !== void 0) style.marginHorizontal = value.horizontal;
+    if (value.vertical !== void 0) style.marginVertical = value.vertical;
+    if (value.top !== void 0) style.marginTop = value.top;
+    if (value.bottom !== void 0) style.marginBottom = value.bottom;
+    if (value.left !== void 0) style.marginLeft = value.left;
+    if (value.right !== void 0) style.marginRight = value.right;
+  }
+  return style;
 };
-var CROSS_AXIS_ALIGN_MAP = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  stretch: "stretch",
-  baseline: "baseline"
+var ALIGNMENT_MAP = {
+  topLeft: { justifyContent: "flex-start", alignItems: "flex-start" },
+  topCenter: { justifyContent: "flex-start", alignItems: "center" },
+  topRight: { justifyContent: "flex-start", alignItems: "flex-end" },
+  centerLeft: { justifyContent: "center", alignItems: "flex-start" },
+  center: { justifyContent: "center", alignItems: "center" },
+  centerRight: { justifyContent: "center", alignItems: "flex-end" },
+  bottomLeft: { justifyContent: "flex-end", alignItems: "flex-start" },
+  bottomCenter: { justifyContent: "flex-end", alignItems: "center" },
+  bottomRight: { justifyContent: "flex-end", alignItems: "flex-end" }
 };
-var resolveMainAxisAlignment = (alignment) => {
-  return MAIN_AXIS_JUSTIFY_MAP[alignment ?? "start"];
+var toFlexPosition = (v) => {
+  if (v <= 0) return "flex-start";
+  if (v >= 1) return "flex-end";
+  return "center";
 };
-var resolveCrossAxisAlignment = (alignment) => {
-  return CROSS_AXIS_ALIGN_MAP[alignment ?? "center"];
+var resolveAlignment = (value) => {
+  if (typeof value === "object") {
+    return {
+      justifyContent: toFlexPosition(value.y),
+      alignItems: toFlexPosition(value.x)
+    };
+  }
+  return ALIGNMENT_MAP[value] ?? {
+    justifyContent: "flex-start",
+    alignItems: "flex-start"
+  };
+};
+var resolveBorderRadius = (value) => {
+  if (typeof value === "number") {
+    return { borderRadius: value };
+  }
+  const style = {};
+  if (value.topLeft !== void 0) style.borderTopLeftRadius = value.topLeft;
+  if (value.topRight !== void 0) style.borderTopRightRadius = value.topRight;
+  if (value.bottomLeft !== void 0) style.borderBottomLeftRadius = value.bottomLeft;
+  if (value.bottomRight !== void 0)
+    style.borderBottomRightRadius = value.bottomRight;
+  return style;
+};
+var resolveBorderSide = (side, position) => {
+  const style = {};
+  if (position === "") {
+    if (side.width !== void 0) style.borderWidth = side.width;
+    if (side.color !== void 0) style.borderColor = side.color;
+    if (side.style !== void 0) style.borderStyle = side.style;
+    return style;
+  }
+  if (position === "Top") {
+    if (side.width !== void 0) style.borderTopWidth = side.width;
+    if (side.color !== void 0) style.borderTopColor = side.color;
+  } else if (position === "Bottom") {
+    if (side.width !== void 0) style.borderBottomWidth = side.width;
+    if (side.color !== void 0) style.borderBottomColor = side.color;
+  } else if (position === "Left") {
+    if (side.width !== void 0) style.borderLeftWidth = side.width;
+    if (side.color !== void 0) style.borderLeftColor = side.color;
+  } else {
+    if (side.width !== void 0) style.borderRightWidth = side.width;
+    if (side.color !== void 0) style.borderRightColor = side.color;
+  }
+  return style;
+};
+var resolveBorder = (value) => {
+  const dir = value;
+  if (dir.top !== void 0 || dir.bottom !== void 0 || dir.left !== void 0 || dir.right !== void 0) {
+    return {
+      ...dir.top ? resolveBorderSide(dir.top, "Top") : {},
+      ...dir.bottom ? resolveBorderSide(dir.bottom, "Bottom") : {},
+      ...dir.left ? resolveBorderSide(dir.left, "Left") : {},
+      ...dir.right ? resolveBorderSide(dir.right, "Right") : {}
+    };
+  }
+  return resolveBorderSide(value, "");
+};
+var resolveShadow = (value) => ({
+  shadowColor: value.color ?? "#000000",
+  shadowOffset: {
+    width: value.offset?.x ?? 0,
+    height: value.offset?.y ?? 4
+  },
+  shadowOpacity: value.opacity ?? 0.1,
+  shadowRadius: value.blur ?? 4,
+  elevation: value.elevation ?? 2
+});
+var resolveTransform = (value) => {
+  const transforms = [];
+  if (value.rotate !== void 0) transforms.push({ rotate: value.rotate });
+  if (value.rotateX !== void 0) transforms.push({ rotateX: value.rotateX });
+  if (value.rotateY !== void 0) transforms.push({ rotateY: value.rotateY });
+  if (value.scale !== void 0) transforms.push({ scale: value.scale });
+  if (value.scaleX !== void 0) transforms.push({ scaleX: value.scaleX });
+  if (value.scaleY !== void 0) transforms.push({ scaleY: value.scaleY });
+  if (value.translateX !== void 0)
+    transforms.push({ translateX: value.translateX });
+  if (value.translateY !== void 0)
+    transforms.push({ translateY: value.translateY });
+  if (value.skewX !== void 0) transforms.push({ skewX: value.skewX });
+  if (value.skewY !== void 0) transforms.push({ skewY: value.skewY });
+  return transforms;
 };
 
-// src/components/view/column/column.tsx
-var Column = ({
-  children,
-  mainAxisAlignment,
-  crossAxisAlignment,
-  spacing,
-  reverse = false,
-  fullWidth,
-  style,
-  noGrowth = false
-}) => {
-  const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
-  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
+// src/components/view/container/container.tsx
+var buildStyle = (props) => ({
+  ...props.width !== void 0 && { width: props.width },
+  ...props.height !== void 0 && { height: props.height },
+  ...props.minWidth !== void 0 && { minWidth: props.minWidth },
+  ...props.maxWidth !== void 0 && { maxWidth: props.maxWidth },
+  ...props.minHeight !== void 0 && { minHeight: props.minHeight },
+  ...props.maxHeight !== void 0 && { maxHeight: props.maxHeight },
+  ...props.aspectRatio !== void 0 && { aspectRatio: props.aspectRatio },
+  ...props.flex !== void 0 && { flex: props.flex },
+  ...props.color !== void 0 && { backgroundColor: props.color },
+  ...props.clip && { overflow: "hidden" },
+  ...props.opacity !== void 0 && { opacity: props.opacity },
+  ...props.padding !== void 0 && resolveEdgeInsets(props.padding, "padding"),
+  ...props.margin !== void 0 && resolveEdgeInsets(props.margin, "margin"),
+  ...props.alignment !== void 0 && resolveAlignment(props.alignment),
+  ...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)
+  }
+});
+var Container = (props) => {
+  const {
+    children,
+    onPress,
+    onLongPress,
+    onPressIn,
+    onPressOut,
+    disabled = false,
+    accessibilityLabel,
+    accessibilityRole,
+    accessibilityState,
+    accessible,
+    testID,
+    style
+  } = props;
+  const containerStyle = buildStyle(props);
+  const isInteractive = !!(onPress ?? onLongPress ?? onPressIn ?? onPressOut);
+  if (isInteractive) {
+    return /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        onPress: disabled ? void 0 : onPress,
+        onLongPress: disabled ? void 0 : onLongPress,
+        onPressIn: disabled ? void 0 : onPressIn,
+        onPressOut: disabled ? void 0 : onPressOut,
+        disabled,
+        accessibilityLabel,
+        accessibilityRole,
+        accessibilityState,
+        accessible,
+        testID,
+        style: [containerStyle, style]
+      },
+      children
+    );
+  }
   return /* @__PURE__ */ React.createElement(
     View,
     {
-      style: [
-        {
-          flex: noGrowth ? void 0 : 1,
-          flexDirection: reverse ? "column-reverse" : "column",
-          justifyContent: resolveMainAxisAlignment(mainAxisAlignment),
-          alignItems: resolveCrossAxisAlignment(crossAxisAlignment)
-        },
-        fullWidthStyle,
-        gapStyle,
-        style
-      ]
+      accessibilityLabel,
+      accessibilityRole,
+      accessibilityState,
+      accessible,
+      testID,
+      style: [containerStyle, style]
     },
     children
   );
 };
+Container.displayName = "Container";
 
-// src/components/view/row/row.tsx
+// src/components/view/flex/flex.tsx
 import React2 from "react";
 import { View as View2 } from "react-native";
-var Row = ({
+
+// src/components/view/layout-utils.ts
+var MAIN_AXIS_JUSTIFY_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  spaceBetween: "space-between",
+  spaceAround: "space-around",
+  spaceEvenly: "space-evenly"
+};
+var CROSS_AXIS_ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
+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/flex/flex.tsx
+var Flex = ({
   children,
+  direction,
   mainAxisAlignment,
   crossAxisAlignment,
-  spacing,
-  reverse = false,
-  fullWidth,
-  style
+  mainAxisSize,
+  wrap = false,
+  gap,
+  reversed = false,
+  flex,
+  style,
+  testID
 }) => {
-  const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", 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),
         {
-          flexDirection: reverse ? "row-reverse" : "row",
+          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/spacer/spacer.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 Expanded = ({
+  children,
+  flex = 1,
+  style,
+  testID
+}) => /* @__PURE__ */ React5.createElement(View3, { testID, style: [{ flex }, style] }, children);
+Expanded.displayName = "Expanded";
+
+// 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__ */ React3.createElement(
-    View3,
+  return /* @__PURE__ */ React7.createElement(
+    View5,
     {
       style: [
         {
@@ -115,117 +333,128 @@ var Spacer = ({ flex = 1, style }) => {
 };
 Spacer.displayName = "Spacer";
 
-// src/components/view/padding/padding.tsx
-import React4 from "react";
-import { View as View4 } from "react-native";
-var Padding = ({
+// src/components/view/wrap/wrap.tsx
+import React8 from "react";
+import { View as View6 } from "react-native";
+var Wrap = ({
   children,
-  all,
-  horizontal,
-  vertical,
-  top,
-  right,
-  bottom,
-  left,
-  fullWidth,
+  direction = "horizontal",
+  alignment,
+  runAlignment,
+  spacing = 0,
+  runSpacing = 0,
   style,
-  noGrowth = false
-}) => {
-  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
-  return /* @__PURE__ */ React4.createElement(
-    View4,
-    {
-      style: [
-        {
-          flex: noGrowth ? void 0 : 1,
-          padding: all,
-          paddingHorizontal: horizontal,
-          paddingVertical: vertical,
-          paddingTop: top,
-          paddingRight: right,
-          paddingBottom: bottom,
-          paddingLeft: left
-        },
-        fullWidthStyle,
-        style
-      ]
-    },
-    children
-  );
-};
+  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 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 React5 from "react";
-import { View as View5 } from "react-native";
-var Margin = ({
-  children,
-  all,
-  horizontal,
-  vertical,
-  top,
-  right,
-  bottom,
-  left,
-  fullWidth,
-  style,
-  noGrowth = false
-}) => {
-  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
-  return /* @__PURE__ */ React5.createElement(
-    View5,
-    {
-      style: [
-        {
-          flex: noGrowth ? void 0 : 1,
-          margin: all,
-          marginHorizontal: horizontal,
-          marginVertical: vertical,
-          marginTop: top,
-          marginRight: right,
-          marginBottom: bottom,
-          marginLeft: left
-        },
-        fullWidthStyle,
-        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 React6 from "react";
-import { View as View6 } from "react-native";
+import React11 from "react";
+import { View as View9 } from "react-native";
 var SizedBox = ({
   children,
   width,
   height,
-  fullWidth,
-  style
+  expand,
+  shrink,
+  style,
+  testID
 }) => {
-  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
-  return /* @__PURE__ */ React6.createElement(
-    View6,
-    {
-      style: [
-        {
-          width,
-          height
-        },
-        fullWidthStyle,
-        style
-      ]
-    },
-    children
-  );
+  if (shrink) {
+    return /* @__PURE__ */ React11.createElement(
+      View9,
+      {
+        testID,
+        style: [{ width: 0, height: 0, overflow: "hidden" }, style]
+      },
+      children
+    );
+  }
+  if (expand) {
+    return /* @__PURE__ */ React11.createElement(View9, { testID, style: [{ flex: 1, alignSelf: "stretch" }, 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 React12 from "react";
+import { View as View10 } from "react-native";
+var ConstrainedBox = ({
+  children,
+  constraints,
+  style,
+  testID
+}) => /* @__PURE__ */ React12.createElement(
+  View10,
+  {
+    testID,
+    style: [
+      {
+        minWidth: constraints.minWidth,
+        maxWidth: constraints.maxWidth,
+        minHeight: constraints.minHeight,
+        maxHeight: constraints.maxHeight
+      },
+      style
+    ]
+  },
+  children
+);
+ConstrainedBox.displayName = "ConstrainedBox";
+
+// src/components/view/fractionally-sized-box/fractionally-sized-box.tsx
+import React13 from "react";
+import { View as View11 } from "react-native";
+var FractionallySizedBox = ({
+  children,
+  widthFactor,
+  heightFactor,
+  alignment,
+  style,
+  testID
+}) => {
+  const sizedStyle = {};
+  if (widthFactor !== void 0) sizedStyle.width = `${widthFactor * 100}%`;
+  if (heightFactor !== void 0) sizedStyle.height = `${heightFactor * 100}%`;
+  const alignStyle = alignment ? resolveAlignment(alignment) : {};
+  return /* @__PURE__ */ React13.createElement(View11, { testID, style: [sizedStyle, alignStyle, style] }, children);
+};
+FractionallySizedBox.displayName = "FractionallySizedBox";
+
 // src/components/view/positioned-view/positioned-view.tsx
-import React7 from "react";
-import { View as View7 } from "react-native";
+import React14 from "react";
+import { View as View12 } from "react-native";
 var PositionedView = ({
   children,
   top,
@@ -235,8 +464,8 @@ var PositionedView = ({
   zIndex,
   style
 }) => {
-  return /* @__PURE__ */ React7.createElement(
-    View7,
+  return /* @__PURE__ */ React14.createElement(
+    View12,
     {
       style: [
         {
@@ -256,8 +485,8 @@ var PositionedView = ({
 PositionedView.displayName = "PositionedView";
 
 // src/components/view/blur-view/blur-view.tsx
-import React8, { useEffect, useRef } from "react";
-import { Animated, StyleSheet, View as View8 } 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"
@@ -297,20 +526,20 @@ var BlurView = ({
     overlayAnim.setValue(overlayOpacity);
     scaleAnim.setValue(0.98);
   }, [overlayAnim, overlayOpacity, scaleAnim, unlockable]);
-  return /* @__PURE__ */ React8.createElement(View8, { style: [styles.container, style] }, /* @__PURE__ */ React8.createElement(Animated.View, { style: { transform: [{ scale: scaleAnim }] } }, children), /* @__PURE__ */ React8.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__ */ React8.createElement(View8, { 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 React9 from "react";
-import { View as View9 } 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";
@@ -364,8 +593,8 @@ var RoundedView = ({
     bottomLeft,
     bottomRight
   });
-  return /* @__PURE__ */ React9.createElement(
-    View9,
+  return /* @__PURE__ */ React16.createElement(
+    View14,
     {
       style: [
         borderRadiusStyle,
@@ -380,19 +609,38 @@ var RoundedView = ({
 };
 
 // src/components/view/aspect-ratio/aspect-ratio.tsx
-import React10 from "react";
-import { View as View10 } from "react-native";
+import React17 from "react";
+import { View as View15 } from "react-native";
 var AspectRatio = ({
   children,
   ratio,
-  style
+  alignment,
+  clip,
+  style,
+  testID
 }) => {
-  return /* @__PURE__ */ React10.createElement(View10, { style: [{ aspectRatio: ratio }, style] }, children);
+  const alignStyle = alignment ? resolveAlignment(alignment) : {};
+  return /* @__PURE__ */ React17.createElement(
+    View15,
+    {
+      testID,
+      style: [
+        {
+          aspectRatio: ratio,
+          overflow: clip ? "hidden" : "visible"
+        },
+        alignStyle,
+        style
+      ]
+    },
+    children
+  );
 };
+AspectRatio.displayName = "AspectRatio";
 
 // src/components/view/surface/surface.tsx
-import React11 from "react";
-import { View as View11 } 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") {
@@ -412,8 +660,8 @@ var Surface = ({
   const theme = useXUITheme();
   const radiusStyle = useBorderRadiusStyles(radius);
   const background = resolveBackgroundColor(themeColor, theme);
-  return /* @__PURE__ */ React11.createElement(
-    View11,
+  return /* @__PURE__ */ React18.createElement(
+    View16,
     {
       style: [
         radiusStyle,
@@ -431,8 +679,8 @@ var Surface = ({
 Surface.displayName = "Surface";
 
 // src/components/view/screen/screen.tsx
-import React12 from "react";
-import { View as View12 } 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,
@@ -443,53 +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__ */ React12.createElement(SafeAreaView, { style: containerStyle }, children);
+    return /* @__PURE__ */ React19.createElement(SafeAreaView, { style: containerStyle }, children);
   }
-  return /* @__PURE__ */ React12.createElement(View12, { style: containerStyle }, children);
+  return /* @__PURE__ */ React19.createElement(View17, { style: containerStyle }, children);
 };
 Screen.displayName = "Screen";
 
+// src/components/view/align/align.tsx
+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 React13 from "react";
-import { View as View13 } from "react-native";
-var Center = ({
-  children,
-  fullWidth,
-  style,
-  noGrowth = false
-}) => {
-  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
-  return /* @__PURE__ */ React13.createElement(
-    View13,
-    {
-      style: [
-        {
-          flex: noGrowth ? void 0 : 1,
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        fullWidthStyle,
-        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 React15, { useMemo as useMemo2, useState } from "react";
+import React23, { useMemo as useMemo2, useState } from "react";
 import {
-  View as View15
+  View as View20
 } from "react-native";
 
 // src/components/view/grid/grid-item.tsx
-import React14 from "react";
-import { View as View14 } from "react-native";
+import React22 from "react";
+import { View as View19 } from "react-native";
 var GridItem = ({ children, style }) => {
-  return /* @__PURE__ */ React14.createElement(View14, { style }, children);
+  return /* @__PURE__ */ React22.createElement(View19, { style }, children);
 };
 GridItem.displayName = "GridItem";
 
@@ -503,7 +737,7 @@ var getSafeSpan = (span, columns) => {
   return Math.min(Math.floor(span), columns);
 };
 var isGridItemElement = (child) => {
-  if (!React15.isValidElement(child)) return false;
+  if (!React23.isValidElement(child)) return false;
   if (child.type === GridItem) return true;
   const displayName = child.type.displayName;
   return displayName === "GridItem";
@@ -522,15 +756,15 @@ var Grid = ({
   const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
   const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
   const itemWidth = `${100 / safeColumns}%`;
-  const items = React15.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__ */ React15.createElement(
-    View15,
+  return /* @__PURE__ */ React23.createElement(
+    View20,
     {
       style: [
         {
@@ -547,7 +781,7 @@ var Grid = ({
       }
     },
     items.map((child, index) => {
-      const key = React15.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) {
@@ -567,7 +801,7 @@ var Grid = ({
           itemStyle,
           child.props.style
         ];
-        const element2 = React15.cloneElement(child, {
+        const element2 = React23.cloneElement(child, {
           key,
           style: mergedStyle
         });
@@ -575,8 +809,8 @@ var Grid = ({
         return element2;
       }
       const defaultItemWidth = baseItemWidth === void 0 ? itemWidth : baseItemWidth;
-      const element = /* @__PURE__ */ React15.createElement(
-        View15,
+      const element = /* @__PURE__ */ React23.createElement(
+        View20,
         {
           key,
           style: [
@@ -599,11 +833,11 @@ var Grid = ({
 };
 
 // src/components/view/grid/grid-builder.tsx
-import React16, { useMemo as useMemo3 } from "react";
+import React24, { useMemo as useMemo3 } from "react";
 import {
   FlatList,
   StyleSheet as StyleSheet2,
-  View as View16
+  View as View21
 } from "react-native";
 var getSafeColumns2 = (columns) => {
   if (!columns || columns <= 0) return 1;
@@ -690,7 +924,7 @@ var GridBuilder = ({
         },
         itemStyle
       ];
-      return /* @__PURE__ */ React16.createElement(View16, { 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;
@@ -706,7 +940,7 @@ var GridBuilder = ({
       },
       itemStyle
     ];
-    return /* @__PURE__ */ React16.createElement(View16, { style: wrapperStyle }, element);
+    return /* @__PURE__ */ React24.createElement(View21, { style: wrapperStyle }, element);
   };
   const flattenedStyle = StyleSheet2.flatten(style) ?? {};
   const {
@@ -727,7 +961,7 @@ var GridBuilder = ({
     ...columnGap !== void 0 ? { columnGap } : {}
   };
   const hasLayoutStyle = Object.keys(layoutStyle).length > 0;
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React24.createElement(
     FlatList,
     {
       data: paddedData,
@@ -747,7 +981,7 @@ var GridBuilder = ({
 GridBuilder.displayName = "GridBuilder";
 
 // src/components/view/conditional/conditional-view.tsx
-import React17, { 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
@@ -899,18 +1133,18 @@ var ConditionalView = ({
   if (!shouldRender) {
     return null;
   }
-  return /* @__PURE__ */ React17.createElement(Animated3.View, { style: animatedStyle }, children);
+  return /* @__PURE__ */ React25.createElement(Animated3.View, { style: animatedStyle }, children);
 };
 
 // src/components/view/masonry-grid/masonry-grid.tsx
-import React18, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
-import { View as View17 } 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 React18.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
+  return React26.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
 };
 var MasonryGrid = ({
   children,
@@ -933,7 +1167,7 @@ var MasonryGrid = ({
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
   const items = useMemo5(
-    () => React18.Children.toArray(children).map((child, index) => ({
+    () => React26.Children.toArray(children).map((child, index) => ({
       key: getItemKey(child, index),
       element: child
     })),
@@ -950,8 +1184,8 @@ var MasonryGrid = ({
     });
     return buckets;
   }, [items, layoutVersion, resolvedRowSpacing, safeColumns]);
-  return /* @__PURE__ */ React18.createElement(
-    View17,
+  return /* @__PURE__ */ React26.createElement(
+    View22,
     {
       style: [
         {
@@ -974,10 +1208,10 @@ var MasonryGrid = ({
         },
         columnStyle
       ];
-      return /* @__PURE__ */ React18.createElement(View17, { 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__ */ React18.createElement(
-          View17,
+        return /* @__PURE__ */ React26.createElement(
+          View22,
           {
             key: item.key,
             style: { marginBottom: isLastRow ? 0 : resolvedRowSpacing },
@@ -996,18 +1230,18 @@ var MasonryGrid = ({
 };
 
 // src/components/view/masonry-grid/masonry-grid-item.tsx
-import React19 from "react";
-import { View as View18 } from "react-native";
+import React27 from "react";
+import { View as View23 } from "react-native";
 var MasonryGridItem = ({
   children,
   style
 }) => {
-  return /* @__PURE__ */ React19.createElement(View18, { style }, children);
+  return /* @__PURE__ */ React27.createElement(View23, { style }, children);
 };
 MasonryGridItem.displayName = "MasonryGridItem";
 
 // src/components/view/masonry-grid/masonry-grid-builder.tsx
-import React20, { useMemo as useMemo6, useRef as useRef4 } from "react";
+import React28, { useMemo as useMemo6, useRef as useRef4 } from "react";
 import {
   ScrollView
 } from "react-native";
@@ -1067,7 +1301,7 @@ var MasonryGridBuilder = ({
       onEndReached();
     }
   };
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React28.createElement(
     ScrollView,
     {
       scrollEventThrottle: 16,
@@ -1079,7 +1313,7 @@ var MasonryGridBuilder = ({
       onScroll: handleScroll
     },
     header,
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React28.createElement(
       MasonryGrid,
       {
         columns,
@@ -1089,18 +1323,25 @@ var MasonryGridBuilder = ({
         style: [{ width: "100%" }, style],
         columnStyle
       },
-      resolvedData.map((item, index) => /* @__PURE__ */ React20.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
   );
 };
 MasonryGridBuilder.displayName = "MasonryGridBuilder";
 export {
+  Align,
   AspectRatio,
   BlurView,
   Center,
   Column,
   ConditionalView,
+  ConstrainedBox,
+  Container,
+  Expanded,
+  Flex,
+  Flexible,
+  FractionallySizedBox,
   Grid,
   GridBuilder,
   GridItem,
@@ -1115,5 +1356,6 @@ export {
   Screen,
   SizedBox,
   Spacer,
-  Surface
+  Surface,
+  Wrap
 };