@xaui/native 0.0.7 → 0.0.8

package/dist/view/index.cjs

@@ -0,0 +1,960 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/view/index.ts
+var view_exports = {};
+__export(view_exports, {
+  BlurView: () => BlurView,
+  Column: () => Column,
+  ConditionalView: () => ConditionalView,
+  Grid: () => Grid,
+  GridBuilder: () => GridBuilder,
+  GridItem: () => GridItem,
+  Margin: () => Margin,
+  MasonryGrid: () => MasonryGrid,
+  MasonryGridBuilder: () => MasonryGridBuilder,
+  MasonryGridItem: () => MasonryGridItem,
+  Padding: () => Padding,
+  PositionedView: () => PositionedView,
+  Row: () => Row,
+  SizedBox: () => SizedBox,
+  Spacer: () => Spacer
+});
+module.exports = __toCommonJS(view_exports);
+
+// src/components/view/column/column.tsx
+var import_react = __toESM(require("react"), 1);
+var import_react_native = require("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"
+};
+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[alignment ?? "start"];
+};
+var resolveCrossAxisAlignment = (alignment) => {
+  return CROSS_AXIS_ALIGN_MAP[alignment ?? "center"];
+};
+
+// src/components/view/column/column.tsx
+var Column = ({
+  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__ */ import_react.default.createElement(
+    import_react_native.View,
+    {
+      style: [
+        {
+          flexDirection: reverse ? "column-reverse" : "column",
+          justifyContent: resolveMainAxisAlignment(mainAxisAlignment),
+          alignItems: resolveCrossAxisAlignment(crossAxisAlignment)
+        },
+        fullWidthStyle,
+        gapStyle,
+        style
+      ]
+    },
+    children
+  );
+};
+
+// src/components/view/row/row.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var Row = ({
+  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__ */ import_react2.default.createElement(
+    import_react_native2.View,
+    {
+      style: [
+        {
+          flexDirection: reverse ? "row-reverse" : "row",
+          justifyContent: resolveMainAxisAlignment(mainAxisAlignment),
+          alignItems: resolveCrossAxisAlignment(crossAxisAlignment)
+        },
+        fullWidthStyle,
+        gapStyle,
+        style
+      ]
+    },
+    children
+  );
+};
+
+// src/components/view/spacer/spacer.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native3 = require("react-native");
+var Spacer = ({ flex = 1, style }) => {
+  return /* @__PURE__ */ import_react3.default.createElement(
+    import_react_native3.View,
+    {
+      style: [
+        {
+          flexGrow: flex,
+          flexShrink: 1,
+          flexBasis: 0
+        },
+        style
+      ]
+    }
+  );
+};
+Spacer.displayName = "Spacer";
+
+// src/components/view/padding/padding.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native4 = require("react-native");
+var Padding = ({
+  children,
+  all,
+  horizontal,
+  vertical,
+  top,
+  right,
+  bottom,
+  left,
+  style
+}) => {
+  return /* @__PURE__ */ import_react4.default.createElement(
+    import_react_native4.View,
+    {
+      style: [
+        {
+          padding: all,
+          paddingHorizontal: horizontal,
+          paddingVertical: vertical,
+          paddingTop: top,
+          paddingRight: right,
+          paddingBottom: bottom,
+          paddingLeft: left
+        },
+        style
+      ]
+    },
+    children
+  );
+};
+Padding.displayName = "Padding";
+
+// src/components/view/margin/margin.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+var Margin = ({
+  children,
+  value,
+  horizontal,
+  vertical,
+  top,
+  right,
+  bottom,
+  left,
+  style
+}) => {
+  return /* @__PURE__ */ import_react5.default.createElement(
+    import_react_native5.View,
+    {
+      style: [
+        {
+          margin: value,
+          marginHorizontal: horizontal,
+          marginVertical: vertical,
+          marginTop: top,
+          marginRight: right,
+          marginBottom: bottom,
+          marginLeft: left
+        },
+        style
+      ]
+    },
+    children
+  );
+};
+Margin.displayName = "Margin";
+
+// src/components/view/sized-box/sized-box.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+var SizedBox = ({
+  children,
+  width,
+  height,
+  style
+}) => {
+  return /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native6.View,
+    {
+      style: [
+        {
+          width,
+          height
+        },
+        style
+      ]
+    },
+    children
+  );
+};
+SizedBox.displayName = "SizedBox";
+
+// src/components/view/positioned-view/positioned-view.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native7 = require("react-native");
+var PositionedView = ({
+  children,
+  top,
+  right,
+  bottom,
+  left,
+  zIndex,
+  style
+}) => {
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native7.View,
+    {
+      style: [
+        {
+          position: "absolute",
+          top,
+          right,
+          bottom,
+          left,
+          zIndex
+        },
+        style
+      ]
+    },
+    children
+  );
+};
+PositionedView.displayName = "PositionedView";
+
+// src/components/view/blur-view/blur-view.tsx
+var import_react8 = __toESM(require("react"), 1);
+var import_react_native8 = require("react-native");
+var styles = import_react_native8.StyleSheet.create({
+  container: {
+    position: "relative"
+  },
+  overlay: {
+    ...import_react_native8.StyleSheet.absoluteFillObject
+  }
+});
+var BlurView = ({
+  children,
+  unlockable = false,
+  intensity = 0.6,
+  overlayColor = "rgba(0, 0, 0, 0.12)",
+  style
+}) => {
+  const overlayOpacity = Math.min(1, Math.max(0, intensity));
+  const overlayAnim = (0, import_react8.useRef)(new import_react_native8.Animated.Value(unlockable ? 0 : overlayOpacity)).current;
+  const scaleAnim = (0, import_react8.useRef)(new import_react_native8.Animated.Value(unlockable ? 1 : 0.98)).current;
+  (0, import_react8.useEffect)(() => {
+    if (unlockable) {
+      import_react_native8.Animated.parallel([
+        import_react_native8.Animated.timing(overlayAnim, {
+          toValue: 0,
+          duration: 220,
+          useNativeDriver: true
+        }),
+        import_react_native8.Animated.timing(scaleAnim, {
+          toValue: 1,
+          duration: 220,
+          useNativeDriver: true
+        })
+      ]).start();
+      return;
+    }
+    overlayAnim.setValue(overlayOpacity);
+    scaleAnim.setValue(0.98);
+  }, [overlayAnim, overlayOpacity, scaleAnim, unlockable]);
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: [styles.container, style] }, /* @__PURE__ */ import_react8.default.createElement(import_react_native8.Animated.View, { style: { transform: [{ scale: scaleAnim }] } }, children), /* @__PURE__ */ import_react8.default.createElement(
+    import_react_native8.Animated.View,
+    {
+      pointerEvents: unlockable ? "none" : "auto",
+      style: [styles.overlay, { opacity: overlayAnim }]
+    },
+    /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: [styles.overlay, { backgroundColor: overlayColor }] })
+  ));
+};
+BlurView.displayName = "BlurView";
+
+// src/components/view/grid/grid.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_react_native10 = require("react-native");
+
+// src/components/view/grid/grid-item.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react_native9 = require("react-native");
+var GridItem = ({ children, style }) => {
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_native9.View, { style }, children);
+};
+GridItem.displayName = "GridItem";
+
+// src/components/view/grid/grid.tsx
+var getSafeColumns = (columns) => {
+  if (!columns || columns <= 0) return 1;
+  return Math.floor(columns);
+};
+var getSafeSpan = (span, columns) => {
+  if (!span || span <= 0) return 1;
+  return Math.min(Math.floor(span), columns);
+};
+var isGridItemElement = (child) => {
+  if (!import_react10.default.isValidElement(child)) return false;
+  if (child.type === GridItem) return true;
+  const displayName = child.type.displayName;
+  return displayName === "GridItem";
+};
+var Grid = ({
+  children,
+  columns = 2,
+  spacing,
+  rowSpacing,
+  columnSpacing,
+  style,
+  itemStyle
+}) => {
+  const [containerWidth, setContainerWidth] = (0, import_react10.useState)();
+  const safeColumns = getSafeColumns(columns);
+  const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
+  const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
+  const itemWidth = `${100 / safeColumns}%`;
+  const items = import_react10.default.Children.toArray(children);
+  const totalColumnGap = resolvedColumnSpacing * (safeColumns - 1);
+  const baseItemWidth = (0, import_react10.useMemo)(() => {
+    if (!containerWidth) return void 0;
+    return (containerWidth - totalColumnGap) / safeColumns;
+  }, [containerWidth, safeColumns, totalColumnGap]);
+  let currentColumn = 0;
+  return /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native10.View,
+    {
+      style: [
+        {
+          flexDirection: "row",
+          flexWrap: "wrap",
+          rowGap: resolvedRowSpacing
+        },
+        style
+      ],
+      onLayout: (event) => {
+        const nextWidth = event.nativeEvent.layout.width;
+        if (!nextWidth || nextWidth === containerWidth) return;
+        setContainerWidth(nextWidth);
+      }
+    },
+    items.map((child, index) => {
+      const key = import_react10.default.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) {
+        currentColumn = 0;
+      }
+      const isEndOfRow = currentColumn + span >= safeColumns;
+      const marginRight = isEndOfRow ? 0 : resolvedColumnSpacing;
+      if (isGridItemElement(child)) {
+        const mergedStyle = [
+          {
+            flexBasis: spanWidth,
+            maxWidth: spanWidth,
+            flexGrow: 0,
+            flexShrink: 0,
+            marginRight
+          },
+          itemStyle,
+          child.props.style
+        ];
+        const element2 = import_react10.default.cloneElement(child, {
+          key,
+          style: mergedStyle
+        });
+        currentColumn = isEndOfRow ? 0 : currentColumn + span;
+        return element2;
+      }
+      const defaultItemWidth = baseItemWidth === void 0 ? itemWidth : baseItemWidth;
+      const element = /* @__PURE__ */ import_react10.default.createElement(
+        import_react_native10.View,
+        {
+          key,
+          style: [
+            {
+              flexBasis: defaultItemWidth,
+              maxWidth: defaultItemWidth,
+              flexGrow: 0,
+              flexShrink: 0,
+              marginRight
+            },
+            itemStyle
+          ]
+        },
+        child
+      );
+      currentColumn = isEndOfRow ? 0 : currentColumn + span;
+      return element;
+    })
+  );
+};
+
+// src/components/view/grid/grid-builder.tsx
+var import_react11 = __toESM(require("react"), 1);
+var import_react_native11 = require("react-native");
+var getSafeColumns2 = (columns) => {
+  if (!columns || columns <= 0) return 1;
+  return Math.floor(columns);
+};
+var resolveGridData = (data, itemCount) => {
+  if (data) return data;
+  if (!itemCount || itemCount <= 0) return [];
+  return Array.from({ length: itemCount }, (_, index) => index);
+};
+var GridBuilder = ({
+  data,
+  itemCount,
+  renderItem,
+  itemBuilder,
+  keyExtractor,
+  columns = 2,
+  spacing,
+  rowSpacing,
+  columnSpacing,
+  style,
+  itemStyle,
+  scrollEnabled,
+  onEndReached,
+  onEndReachedThreshold = 0.1,
+  contentContainerStyle,
+  header,
+  footer
+}) => {
+  const safeColumns = getSafeColumns2(columns);
+  const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
+  const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
+  const resolvedData = (0, import_react11.useMemo)(
+    () => resolveGridData(data, itemCount),
+    [data, itemCount]
+  );
+  const paddedData = (0, import_react11.useMemo)(() => {
+    const remainder = resolvedData.length % safeColumns;
+    const placeholders = remainder === 0 ? 0 : safeColumns - remainder;
+    if (placeholders === 0) return resolvedData.map((item, index) => ({
+      type: "data",
+      item,
+      index
+    }));
+    return [
+      ...resolvedData.map((item, index) => ({
+        type: "data",
+        item,
+        index
+      })),
+      ...Array.from({ length: placeholders }, (_, index) => ({
+        type: "placeholder",
+        key: `placeholder-${resolvedData.length + index}`
+      }))
+    ];
+  }, [resolvedData, safeColumns]);
+  const resolvedKeyExtractor = (0, import_react11.useMemo)(() => {
+    if (keyExtractor)
+      return (item, index) => item.type === "data" ? keyExtractor(item.item, item.index) : item.key ?? `placeholder-${index}`;
+    return (item, index) => item.type === "data" ? `grid-${item.index}` : item.key ?? `placeholder-${index}`;
+  }, [keyExtractor]);
+  const resolvedRenderer = (0, import_react11.useMemo)(() => {
+    if (renderItem) return renderItem;
+    if (itemBuilder)
+      return ({ item, index }) => itemBuilder({ item, index });
+    return void 0;
+  }, [renderItem, itemBuilder]);
+  if (!resolvedRenderer) return null;
+  const renderGridItem = ({
+    item,
+    index
+  }) => {
+    if (item.type === "placeholder") {
+      const isLastColumn2 = (index + 1) % safeColumns === 0;
+      const totalItems2 = paddedData.length;
+      const lastRowStart2 = totalItems2 === 0 ? 0 : totalItems2 - (totalItems2 % safeColumns || safeColumns);
+      const isLastRow2 = index >= lastRowStart2;
+      const placeholderStyle = [
+        {
+          flex: 1,
+          marginRight: isLastColumn2 ? 0 : resolvedColumnSpacing,
+          marginBottom: isLastRow2 ? 0 : resolvedRowSpacing
+        },
+        itemStyle
+      ];
+      return /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: placeholderStyle, pointerEvents: "none" });
+    }
+    const element = resolvedRenderer({ item: item.item, index: item.index });
+    if (element === null) return null;
+    const isLastColumn = (index + 1) % safeColumns === 0;
+    const totalItems = paddedData.length;
+    const lastRowStart = totalItems === 0 ? 0 : totalItems - (totalItems % safeColumns || safeColumns);
+    const isLastRow = index >= lastRowStart;
+    const wrapperStyle = [
+      {
+        flex: 1,
+        marginRight: isLastColumn ? 0 : resolvedColumnSpacing,
+        marginBottom: isLastRow ? 0 : resolvedRowSpacing
+      },
+      itemStyle
+    ];
+    return /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: wrapperStyle }, element);
+  };
+  const flattenedStyle = import_react_native11.StyleSheet.flatten(style) ?? {};
+  const {
+    alignItems,
+    justifyContent,
+    alignContent,
+    gap,
+    rowGap,
+    columnGap,
+    ...restStyle
+  } = flattenedStyle;
+  const layoutStyle = {
+    ...alignItems !== void 0 ? { alignItems } : {},
+    ...justifyContent !== void 0 ? { justifyContent } : {},
+    ...alignContent !== void 0 ? { alignContent } : {},
+    ...gap !== void 0 ? { gap } : {},
+    ...rowGap !== void 0 ? { rowGap } : {},
+    ...columnGap !== void 0 ? { columnGap } : {}
+  };
+  const hasLayoutStyle = Object.keys(layoutStyle).length > 0;
+  return /* @__PURE__ */ import_react11.default.createElement(
+    import_react_native11.FlatList,
+    {
+      data: paddedData,
+      renderItem: renderGridItem,
+      keyExtractor: resolvedKeyExtractor,
+      numColumns: safeColumns,
+      scrollEnabled,
+      onEndReached,
+      onEndReachedThreshold,
+      contentContainerStyle: hasLayoutStyle ? [contentContainerStyle, layoutStyle] : contentContainerStyle,
+      ListHeaderComponent: header,
+      ListFooterComponent: footer,
+      style: Object.keys(restStyle).length > 0 ? restStyle : void 0
+    }
+  );
+};
+GridBuilder.displayName = "GridBuilder";
+
+// src/components/view/conditional/conditional-view.tsx
+var import_react12 = __toESM(require("react"), 1);
+var import_react_native13 = require("react-native");
+
+// src/components/view/conditional/conditional-view.utils.ts
+var FINAL_VALUES = {
+  opacity: 1,
+  scale: 1,
+  translateX: 0,
+  translateY: 0
+};
+var getInitialValues = (animation) => {
+  switch (animation) {
+    case "fade":
+      return { opacity: 0.5, scale: 1, translateX: 0, translateY: 0 };
+    case "scale":
+    default:
+      return { opacity: 1, scale: 0.5, translateX: 0, translateY: 0 };
+  }
+};
+var getExitValues = (animation) => {
+  switch (animation) {
+    case "fade":
+      return { opacity: 0.5, scale: 1, translateX: 0, translateY: 0 };
+    case "scale":
+    default:
+      return getInitialValues(animation);
+  }
+};
+
+// src/components/view/conditional/conditional-view.animation.ts
+var import_react_native12 = require("react-native");
+var runConditionalViewAnimation = ({
+  opacity,
+  scale,
+  translateX,
+  translateY,
+  toValues,
+  onComplete
+}) => {
+  const easing = import_react_native12.Easing.out(import_react_native12.Easing.cubic);
+  const animation = import_react_native12.Animated.parallel([
+    import_react_native12.Animated.timing(opacity, {
+      toValue: toValues.opacity,
+      duration: 800,
+      easing,
+      useNativeDriver: true
+    }),
+    import_react_native12.Animated.timing(scale, {
+      toValue: toValues.scale,
+      duration: 800,
+      easing,
+      useNativeDriver: true
+    }),
+    import_react_native12.Animated.timing(translateX, {
+      toValue: toValues.translateX,
+      duration: 800,
+      easing,
+      useNativeDriver: true
+    }),
+    import_react_native12.Animated.timing(translateY, {
+      toValue: toValues.translateY,
+      duration: 800,
+      easing,
+      useNativeDriver: true
+    })
+  ]);
+  animation.start(({ finished }) => {
+    if (finished) {
+      onComplete?.();
+    }
+  });
+  return animation;
+};
+
+// src/components/view/conditional/conditional-view.tsx
+var ConditionalView = ({
+  isVisible,
+  children,
+  animation = "fade",
+  disableAnimation = false
+}) => {
+  const [shouldRender, setShouldRender] = (0, import_react12.useState)(isVisible);
+  const animationRef = (0, import_react12.useRef)(null);
+  const initialValues = (0, import_react12.useMemo)(() => getInitialValues(animation), [animation]);
+  const exitValues = (0, import_react12.useMemo)(() => getExitValues(animation), [animation]);
+  const opacity = (0, import_react12.useRef)(
+    new import_react_native13.Animated.Value(disableAnimation ? FINAL_VALUES.opacity : initialValues.opacity)
+  ).current;
+  const scale = (0, import_react12.useRef)(
+    new import_react_native13.Animated.Value(disableAnimation ? FINAL_VALUES.scale : initialValues.scale)
+  ).current;
+  const translateX = (0, import_react12.useRef)(
+    new import_react_native13.Animated.Value(
+      disableAnimation ? FINAL_VALUES.translateX : initialValues.translateX
+    )
+  ).current;
+  const translateY = (0, import_react12.useRef)(
+    new import_react_native13.Animated.Value(
+      disableAnimation ? FINAL_VALUES.translateY : initialValues.translateY
+    )
+  ).current;
+  (0, import_react12.useEffect)(() => {
+    if (isVisible) {
+      setShouldRender(true);
+    }
+  }, [isVisible]);
+  (0, import_react12.useEffect)(() => {
+    if (!shouldRender) return;
+    const startValues = isVisible ? disableAnimation ? FINAL_VALUES : initialValues : FINAL_VALUES;
+    const targetValues = isVisible ? FINAL_VALUES : exitValues;
+    opacity.setValue(startValues.opacity);
+    scale.setValue(startValues.scale);
+    translateX.setValue(startValues.translateX);
+    translateY.setValue(startValues.translateY);
+    if (disableAnimation) {
+      if (!isVisible) {
+        setShouldRender(false);
+      }
+      return;
+    }
+    animationRef.current?.stop();
+    animationRef.current = runConditionalViewAnimation({
+      opacity,
+      scale,
+      translateX,
+      translateY,
+      toValues: targetValues,
+      onComplete: !isVisible ? () => setShouldRender(false) : void 0
+    });
+  }, [
+    isVisible,
+    shouldRender,
+    disableAnimation,
+    initialValues,
+    exitValues,
+    opacity,
+    scale,
+    translateX,
+    translateY
+  ]);
+  const animatedStyle = (0, import_react12.useMemo)(
+    () => ({
+      opacity,
+      transform: [{ translateX }, { translateY }, { scale }]
+    }),
+    [opacity, scale, translateX, translateY]
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react12.default.createElement(import_react_native13.Animated.View, { style: animatedStyle }, children);
+};
+
+// src/components/view/masonry-grid/masonry-grid.tsx
+var import_react13 = __toESM(require("react"), 1);
+var import_react_native14 = require("react-native");
+var getSafeColumns3 = (columns) => {
+  if (!columns || columns <= 0) return 1;
+  return Math.floor(columns);
+};
+var getItemKey = (child, index) => {
+  return import_react13.default.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
+};
+var MasonryGrid = ({
+  children,
+  columns = 2,
+  spacing,
+  rowSpacing,
+  columnSpacing,
+  style,
+  columnStyle
+}) => {
+  const [containerWidth, setContainerWidth] = (0, import_react13.useState)();
+  const heightMapRef = (0, import_react13.useRef)({});
+  const [layoutVersion, setLayoutVersion] = (0, import_react13.useState)(0);
+  const safeColumns = getSafeColumns3(columns);
+  const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
+  const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
+  const totalColumnGap = resolvedColumnSpacing * (safeColumns - 1);
+  const columnWidth = (0, import_react13.useMemo)(() => {
+    if (!containerWidth) return void 0;
+    return (containerWidth - totalColumnGap) / safeColumns;
+  }, [containerWidth, safeColumns, totalColumnGap]);
+  const items = (0, import_react13.useMemo)(
+    () => import_react13.default.Children.toArray(children).map((child, index) => ({
+      key: getItemKey(child, index),
+      element: child
+    })),
+    [children]
+  );
+  const columnsItems = (0, import_react13.useMemo)(() => {
+    const buckets = Array.from({ length: safeColumns }, () => []);
+    const heights = new Array(safeColumns).fill(0);
+    items.forEach((item) => {
+      const height = heightMapRef.current[item.key];
+      const targetIndex = heights.indexOf(Math.min(...heights));
+      buckets[targetIndex].push(item);
+      heights[targetIndex] += (height ?? 0) + resolvedRowSpacing;
+    });
+    return buckets;
+  }, [items, layoutVersion, resolvedRowSpacing, safeColumns]);
+  return /* @__PURE__ */ import_react13.default.createElement(
+    import_react_native14.View,
+    {
+      style: [
+        {
+          flexDirection: "row"
+        },
+        style
+      ],
+      onLayout: (event) => {
+        const nextWidth = event.nativeEvent.layout.width;
+        if (!nextWidth || nextWidth === containerWidth) return;
+        setContainerWidth(nextWidth);
+      }
+    },
+    columnsItems.map((column, columnIndex) => {
+      const isLastColumn = columnIndex === columnsItems.length - 1;
+      const columnStyles = [
+        {
+          width: columnWidth,
+          marginRight: isLastColumn ? 0 : resolvedColumnSpacing
+        },
+        columnStyle
+      ];
+      return /* @__PURE__ */ import_react13.default.createElement(import_react_native14.View, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
+        const isLastRow = index === column.length - 1;
+        return /* @__PURE__ */ import_react13.default.createElement(
+          import_react_native14.View,
+          {
+            key: item.key,
+            style: { marginBottom: isLastRow ? 0 : resolvedRowSpacing },
+            onLayout: (event) => {
+              const nextHeight = event.nativeEvent.layout.height;
+              if (heightMapRef.current[item.key] === nextHeight) return;
+              heightMapRef.current[item.key] = nextHeight;
+              setLayoutVersion((value) => value + 1);
+            }
+          },
+          item.element
+        );
+      }));
+    })
+  );
+};
+
+// src/components/view/masonry-grid/masonry-grid-item.tsx
+var import_react14 = __toESM(require("react"), 1);
+var import_react_native15 = require("react-native");
+var MasonryGridItem = ({
+  children,
+  style
+}) => {
+  return /* @__PURE__ */ import_react14.default.createElement(import_react_native15.View, { style }, children);
+};
+MasonryGridItem.displayName = "MasonryGridItem";
+
+// src/components/view/masonry-grid/masonry-grid-builder.tsx
+var import_react15 = __toESM(require("react"), 1);
+var import_react_native16 = require("react-native");
+var resolveMasonryData = (data, itemCount) => {
+  if (data) return data;
+  if (!itemCount || itemCount <= 0) return [];
+  return Array.from({ length: itemCount }, (_, index) => index);
+};
+var MasonryGridBuilder = ({
+  data,
+  itemCount,
+  renderItem,
+  itemBuilder,
+  keyExtractor,
+  columns = 2,
+  spacing,
+  rowSpacing,
+  columnSpacing,
+  style,
+  columnStyle,
+  onEndReached,
+  onEndReachedThreshold = 0.1,
+  header,
+  footer,
+  scrollEnabled,
+  contentContainerStyle,
+  showsVerticalScrollIndicator,
+  showsHorizontalScrollIndicator,
+  bounces,
+  onScroll
+}) => {
+  const resolvedData = (0, import_react15.useMemo)(
+    () => resolveMasonryData(data, itemCount),
+    [data, itemCount]
+  );
+  const resolvedKeyExtractor = (0, import_react15.useMemo)(() => {
+    if (keyExtractor) return keyExtractor;
+    return (_, index) => `masonry-${index}`;
+  }, [keyExtractor]);
+  const resolvedRenderer = (0, import_react15.useMemo)(() => {
+    if (renderItem) return renderItem;
+    if (itemBuilder)
+      return ({ item, index }) => itemBuilder({ item, index });
+    return void 0;
+  }, [renderItem, itemBuilder]);
+  const lastEndReachedHeight = (0, import_react15.useRef)(0);
+  if (!resolvedRenderer) return null;
+  const handleScroll = (event) => {
+    onScroll?.(event);
+    if (!onEndReached) return;
+    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
+    if (!layoutMeasurement?.height) return;
+    const distanceFromEnd = contentSize.height - (layoutMeasurement.height + contentOffset.y);
+    const threshold = onEndReachedThreshold * layoutMeasurement.height;
+    if (distanceFromEnd <= threshold && contentSize.height !== lastEndReachedHeight.current) {
+      lastEndReachedHeight.current = contentSize.height;
+      onEndReached();
+    }
+  };
+  return /* @__PURE__ */ import_react15.default.createElement(
+    import_react_native16.ScrollView,
+    {
+      scrollEventThrottle: 16,
+      scrollEnabled,
+      contentContainerStyle,
+      showsVerticalScrollIndicator,
+      showsHorizontalScrollIndicator,
+      bounces,
+      onScroll: handleScroll
+    },
+    header,
+    /* @__PURE__ */ import_react15.default.createElement(
+      MasonryGrid,
+      {
+        columns,
+        spacing,
+        rowSpacing,
+        columnSpacing,
+        style: [{ width: "100%" }, style],
+        columnStyle
+      },
+      resolvedData.map((item, index) => /* @__PURE__ */ import_react15.default.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
+    ),
+    footer
+  );
+};
+MasonryGridBuilder.displayName = "MasonryGridBuilder";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BlurView,
+  Column,
+  ConditionalView,
+  Grid,
+  GridBuilder,
+  GridItem,
+  Margin,
+  MasonryGrid,
+  MasonryGridBuilder,
+  MasonryGridItem,
+  Padding,
+  PositionedView,
+  Row,
+  SizedBox,
+  Spacer
+});