@xaui/native 0.2.4 → 0.2.6

package/dist/view/index.cjs

@@ -4,10 +4,211 @@
 
 var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
-// src/components/view/column/column.tsx
+// src/components/view/container/container.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 var _reactnative = require('react-native');
 
+// 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 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 toFlexPosition = (v) => {
+  if (v <= 0) return "flex-start";
+  if (v >= 1) return "flex-end";
+  return "center";
+};
+var resolveAlignment = (value) => {
+  if (typeof value === "object") {
+    return {
+      justifyContent: toFlexPosition(value.y),
+      alignItems: toFlexPosition(value.x)
+    };
+  }
+  return _nullishCoalesce(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: _nullishCoalesce(value.color, () => ( "#000000")),
+  shadowOffset: {
+    width: _nullishCoalesce(_optionalChain([value, 'access', _2 => _2.offset, 'optionalAccess', _3 => _3.x]), () => ( 0)),
+    height: _nullishCoalesce(_optionalChain([value, 'access', _4 => _4.offset, 'optionalAccess', _5 => _5.y]), () => ( 4))
+  },
+  shadowOpacity: _nullishCoalesce(value.opacity, () => ( 0.1)),
+  shadowRadius: _nullishCoalesce(value.blur, () => ( 4)),
+  elevation: _nullishCoalesce(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/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 = !!(_nullishCoalesce(_nullishCoalesce(_nullishCoalesce(onPress, () => ( onLongPress)), () => ( onPressIn)), () => ( onPressOut)));
+  if (isInteractive) {
+    return /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.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__ */ _react2.default.createElement(
+    _reactnative.View,
+    {
+      accessibilityLabel,
+      accessibilityRole,
+      accessibilityState,
+      accessible,
+      testID,
+      style: [containerStyle, style]
+    },
+    children
+  );
+};
+Container.displayName = "Container";
+
+// src/components/view/column/column.tsx
+
+
+
 // src/components/view/layout-utils.ts
 var MAIN_AXIS_JUSTIFY_MAP = {
   start: "flex-start",
@@ -118,81 +319,13 @@ Spacer.displayName = "Spacer";
 // src/components/view/padding/padding.tsx
 
 
-var Padding = ({
-  children,
-  all,
-  horizontal,
-  vertical,
-  top,
-  right,
-  bottom,
-  left,
-  fullWidth,
-  style,
-  noGrowth = false
-}) => {
-  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        {
-          flex: noGrowth ? void 0 : 1,
-          padding: all,
-          paddingHorizontal: horizontal,
-          paddingVertical: vertical,
-          paddingTop: top,
-          paddingRight: right,
-          paddingBottom: bottom,
-          paddingLeft: left
-        },
-        fullWidthStyle,
-        style
-      ]
-    },
-    children
-  );
-};
+var Padding = ({ children, padding, style }) => /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [resolveEdgeInsets(padding, "padding"), style] }, children);
 Padding.displayName = "Padding";
 
 // src/components/view/margin/margin.tsx
 
 
-var Margin = ({
-  children,
-  all,
-  horizontal,
-  vertical,
-  top,
-  right,
-  bottom,
-  left,
-  fullWidth,
-  style,
-  noGrowth = false
-}) => {
-  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        {
-          flex: noGrowth ? void 0 : 1,
-          margin: all,
-          marginHorizontal: horizontal,
-          marginVertical: vertical,
-          marginTop: top,
-          marginRight: right,
-          marginBottom: bottom,
-          marginLeft: left
-        },
-        fullWidthStyle,
-        style
-      ]
-    },
-    children
-  );
-};
+var Margin = ({ children, margin, style }) => /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [resolveEdgeInsets(margin, "margin"), style] }, children);
 Margin.displayName = "Margin";
 
 // src/components/view/sized-box/sized-box.tsx
@@ -202,27 +335,66 @@ var SizedBox = ({
   children,
   width,
   height,
-  fullWidth,
-  style
+  expand,
+  shrink,
+  style,
+  testID
 }) => {
-  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        {
-          width,
-          height
-        },
-        fullWidthStyle,
-        style
-      ]
-    },
-    children
-  );
+  if (shrink) {
+    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);
+  }
+  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { testID, style: [{ width, height }, style] }, children);
 };
 SizedBox.displayName = "SizedBox";
 
+// src/components/view/constrained-box/constrained-box.tsx
+
+
+var ConstrainedBox = ({
+  children,
+  constraints,
+  style,
+  testID
+}) => /* @__PURE__ */ _react2.default.createElement(
+  _reactnative.View,
+  {
+    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
+
+
+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__ */ _react2.default.createElement(_reactnative.View, { testID, style: [sizedStyle, alignStyle, style] }, children);
+};
+FractionallySizedBox.displayName = "FractionallySizedBox";
+
 // src/components/view/positioned-view/positioned-view.tsx
 
 
@@ -385,10 +557,29 @@ var RoundedView = ({
 var AspectRatio = ({
   children,
   ratio,
-  style
+  alignment,
+  clip,
+  style,
+  testID
 }) => {
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [{ aspectRatio: ratio }, style] }, children);
+  const alignStyle = alignment ? resolveAlignment(alignment) : {};
+  return /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.View,
+    {
+      testID,
+      style: [
+        {
+          aspectRatio: ratio,
+          overflow: clip ? "hidden" : "visible"
+        },
+        alignStyle,
+        style
+      ]
+    },
+    children
+  );
 };
+AspectRatio.displayName = "AspectRatio";
 
 // src/components/view/surface/surface.tsx
 
@@ -443,50 +634,23 @@ var Screen = ({
 }) => {
   const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const resolvedBackgroundColor = _nullishCoalesce(backgroundColor, () => ( theme.colors.background));
-  const Container = safeArea ? _reactnativesafeareacontext.SafeAreaView : _reactnative.View;
-  return /* @__PURE__ */ _react2.default.createElement(
-    Container,
-    {
-      style: [
-        {
-          flex: 1,
-          backgroundColor: resolvedBackgroundColor,
-          padding
-        },
-        style
-      ]
-    },
-    children
-  );
+  const containerStyle = [{ flex: 1, backgroundColor: resolvedBackgroundColor, padding }, style];
+  if (safeArea) {
+    return /* @__PURE__ */ _react2.default.createElement(_reactnativesafeareacontext.SafeAreaView, { style: containerStyle }, children);
+  }
+  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: containerStyle }, children);
 };
 Screen.displayName = "Screen";
 
-// src/components/view/center/center.tsx
+// src/components/view/align/align.tsx
 
 
-var Center = ({
-  children,
-  fullWidth,
-  style,
-  noGrowth = false
-}) => {
-  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        {
-          flex: noGrowth ? void 0 : 1,
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        fullWidthStyle,
-        style
-      ]
-    },
-    children
-  );
-};
+var Align = ({ children, alignment, style }) => /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [{ flex: 1 }, resolveAlignment(alignment), style] }, children);
+Align.displayName = "Align";
+
+// src/components/view/center/center.tsx
+
+var Center = ({ children, style }) => /* @__PURE__ */ _react2.default.createElement(Align, { alignment: "center", style }, children);
 Center.displayName = "Center";
 
 // src/components/view/grid/grid.tsx
@@ -825,7 +989,7 @@ var runConditionalViewAnimation = ({
   ]);
   animation.start(({ finished }) => {
     if (finished) {
-      _optionalChain([onComplete, 'optionalCall', _2 => _2()]);
+      _optionalChain([onComplete, 'optionalCall', _6 => _6()]);
     }
   });
   return animation;
@@ -879,7 +1043,7 @@ var ConditionalView = ({
       }
       return;
     }
-    _optionalChain([animationRef, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.stop, 'call', _5 => _5()]);
+    _optionalChain([animationRef, 'access', _7 => _7.current, 'optionalAccess', _8 => _8.stop, 'call', _9 => _9()]);
     animationRef.current = runConditionalViewAnimation({
       opacity,
       scale,
@@ -1066,10 +1230,10 @@ var MasonryGridBuilder = ({
   const lastEndReachedHeight = _react.useRef.call(void 0, 0);
   if (!resolvedRenderer) return null;
   const handleScroll = (event) => {
-    _optionalChain([onScroll, 'optionalCall', _6 => _6(event)]);
+    _optionalChain([onScroll, 'optionalCall', _10 => _10(event)]);
     if (!onEndReached) return;
     const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
-    if (!_optionalChain([layoutMeasurement, 'optionalAccess', _7 => _7.height])) return;
+    if (!_optionalChain([layoutMeasurement, 'optionalAccess', _11 => _11.height])) return;
     const distanceFromEnd = contentSize.height - (layoutMeasurement.height + contentOffset.y);
     const threshold = onEndReachedThreshold * layoutMeasurement.height;
     if (distanceFromEnd <= threshold && contentSize.height !== lastEndReachedHeight.current) {
@@ -1126,4 +1290,8 @@ MasonryGridBuilder.displayName = "MasonryGridBuilder";
 
 
 
-exports.AspectRatio = AspectRatio; exports.BlurView = BlurView; exports.Center = Center; exports.Column = Column; exports.ConditionalView = ConditionalView; 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.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;