@xaui/native 0.0.16 → 0.0.18

package/dist/typography/index.js

@@ -1,7 +1,150 @@
+import "../chunk-DXXNBF5P.js";
 import {
-  Typography
-} from "../chunk-ZYTBRHLJ.js";
-import "../chunk-NBRASCX4.js";
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/typography/typography.tsx
+import React, { useMemo as useMemo2 } from "react";
+import { Text } from "react-native";
+
+// src/components/typography/typography.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  text: {
+    includeFontPadding: false
+  }
+});
+
+// src/components/typography/typography.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor } from "@xaui/core";
+var knownVariants = {
+  caption: true,
+  headlineLarge: true,
+  headlineMedium: true,
+  headlineSmall: true,
+  subtitleLarge: true,
+  subtitleMedium: true,
+  subtitleSmall: true,
+  bodyLarge: true,
+  bodyMedium: true,
+  bodySmall: true
+};
+var isKnownVariant = (variant) => {
+  return Boolean(knownVariants[variant]);
+};
+var useTypographyColor = (themeColor) => {
+  const theme = useXUITheme();
+  const color = useMemo(() => {
+    if (themeColor === "default") {
+      return theme.colors.foreground;
+    }
+    const safeThemeColor = getSafeThemeColor(themeColor);
+    return theme.colors[safeThemeColor].main;
+  }, [theme, themeColor]);
+  return color;
+};
+var useTypographyVariantStyles = (variant) => {
+  const theme = useXUITheme();
+  const variantStyles = useMemo(() => {
+    if (!isKnownVariant(variant)) {
+      return {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.md,
+        fontWeight: theme.fontWeights.normal
+      };
+    }
+    const styles2 = {
+      caption: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.xs,
+        fontWeight: theme.fontWeights.normal
+      },
+      headlineLarge: {
+        fontFamily: theme.fontFamilies.heading,
+        fontSize: theme.fontSizes["4xl"] + 3,
+        fontWeight: theme.fontWeights.bold
+      },
+      headlineMedium: {
+        fontFamily: theme.fontFamilies.heading,
+        fontSize: theme.fontSizes["3xl"] + 3,
+        fontWeight: theme.fontWeights.bold
+      },
+      headlineSmall: {
+        fontFamily: theme.fontFamilies.heading,
+        fontSize: theme.fontSizes["2xl"] + 3,
+        fontWeight: theme.fontWeights.semibold
+      },
+      subtitleLarge: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.md + 5,
+        fontWeight: theme.fontWeights.medium
+      },
+      subtitleMedium: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.sm + 5,
+        fontWeight: theme.fontWeights.medium
+      },
+      subtitleSmall: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.xs + 5,
+        fontWeight: theme.fontWeights.medium
+      },
+      bodyLarge: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.md,
+        fontWeight: theme.fontWeights.normal
+      },
+      bodyMedium: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.sm,
+        fontWeight: theme.fontWeights.normal
+      },
+      bodySmall: {
+        fontFamily: theme.fontFamilies.body,
+        fontSize: theme.fontSizes.xs,
+        fontWeight: theme.fontWeights.normal
+      }
+    };
+    return styles2[variant];
+  }, [theme, variant]);
+  return variantStyles;
+};
+
+// src/components/typography/typography.tsx
+var Typography = ({
+  children,
+  align,
+  themeColor = "default",
+  variant = "bodyMedium",
+  maxLines,
+  overflow = "clip",
+  style
+}) => {
+  const color = useTypographyColor(themeColor);
+  const variantStyles = useTypographyVariantStyles(variant);
+  const colorStyle = { color };
+  const ellipsizeMode = useMemo2(() => {
+    if (!maxLines) return void 0;
+    if (overflow === "clip") return "clip";
+    return "tail";
+  }, [maxLines, overflow]);
+  return /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      numberOfLines: maxLines,
+      ellipsizeMode,
+      style: [
+        styles.text,
+        variantStyles,
+        align && { textAlign: align },
+        colorStyle,
+        style
+      ]
+    },
+    children
+  );
+};
 export {
   Typography
 };

package/dist/view/index.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/view/index.ts
 var view_exports = {};
 __export(view_exports, {
+  AspectRatio: () => AspectRatio,
   BlurView: () => BlurView,
   Column: () => Column,
   ConditionalView: () => ConditionalView,
@@ -42,6 +43,7 @@ __export(view_exports, {
   MasonryGridItem: () => MasonryGridItem,
   Padding: () => Padding,
   PositionedView: () => PositionedView,
+  RoundedView: () => RoundedView,
   Row: () => Row,
   SizedBox: () => SizedBox,
   Spacer: () => Spacer
@@ -343,15 +345,86 @@ var BlurView = ({
 };
 BlurView.displayName = "BlurView";
 
-// src/components/view/grid/grid.tsx
+// src/components/view/rounded-view/rounded-view.tsx
 var import_react10 = __toESM(require("react"), 1);
+var import_react_native9 = require("react-native");
+
+// src/components/view/rounded-view/rounded-view.hook.ts
+var import_react9 = require("react");
+var useRoundedViewStyle = (props) => {
+  const { all = 0, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight } = props;
+  return (0, import_react9.useMemo)(() => {
+    return {
+      borderTopLeftRadius: topLeft ?? top ?? left ?? all,
+      borderTopRightRadius: topRight ?? top ?? right ?? all,
+      borderBottomLeftRadius: bottomLeft ?? bottom ?? left ?? all,
+      borderBottomRightRadius: bottomRight ?? bottom ?? right ?? all
+    };
+  }, [all, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight]);
+};
+
+// src/components/view/rounded-view/rounded-view.tsx
+var RoundedView = ({
+  children,
+  all,
+  top,
+  bottom,
+  left,
+  right,
+  topLeft,
+  topRight,
+  bottomLeft,
+  bottomRight,
+  fullWidth = false,
+  backgroundColor,
+  style
+}) => {
+  const borderRadiusStyle = useRoundedViewStyle({
+    all,
+    top,
+    bottom,
+    left,
+    right,
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  });
+  return /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native9.View,
+    {
+      style: [
+        borderRadiusStyle,
+        fullWidth && styles2.fullWidth,
+        backgroundColor && { backgroundColor },
+        style
+      ]
+    },
+    children
+  );
+};
+var styles2 = import_react_native9.StyleSheet.create({
+  fullWidth: {
+    width: "100%"
+  }
+});
+
+// src/components/view/aspect-ratio/aspect-ratio.tsx
+var import_react11 = __toESM(require("react"), 1);
 var import_react_native10 = require("react-native");
+var AspectRatio = ({ children, ratio, style }) => {
+  return /* @__PURE__ */ import_react11.default.createElement(import_react_native10.View, { style: [{ aspectRatio: ratio }, style] }, children);
+};
+
+// src/components/view/grid/grid.tsx
+var import_react13 = __toESM(require("react"), 1);
+var import_react_native12 = 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 import_react12 = __toESM(require("react"), 1);
+var import_react_native11 = require("react-native");
 var GridItem = ({ children, style }) => {
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_native9.View, { style }, children);
+  return /* @__PURE__ */ import_react12.default.createElement(import_react_native11.View, { style }, children);
 };
 GridItem.displayName = "GridItem";
 
@@ -365,7 +438,7 @@ var getSafeSpan = (span, columns) => {
   return Math.min(Math.floor(span), columns);
 };
 var isGridItemElement = (child) => {
-  if (!import_react10.default.isValidElement(child)) return false;
+  if (!import_react13.default.isValidElement(child)) return false;
   if (child.type === GridItem) return true;
   const displayName = child.type.displayName;
   return displayName === "GridItem";
@@ -379,20 +452,20 @@ var Grid = ({
   style,
   itemStyle
 }) => {
-  const [containerWidth, setContainerWidth] = (0, import_react10.useState)();
+  const [containerWidth, setContainerWidth] = (0, import_react13.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 items = import_react13.default.Children.toArray(children);
   const totalColumnGap = resolvedColumnSpacing * (safeColumns - 1);
-  const baseItemWidth = (0, import_react10.useMemo)(() => {
+  const baseItemWidth = (0, import_react13.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,
+  return /* @__PURE__ */ import_react13.default.createElement(
+    import_react_native12.View,
     {
       style: [
         {
@@ -409,7 +482,7 @@ var Grid = ({
       }
     },
     items.map((child, index) => {
-      const key = import_react10.default.isValidElement(child) && child.key ? child.key : `grid-${index}`;
+      const key = import_react13.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) {
@@ -429,7 +502,7 @@ var Grid = ({
           itemStyle,
           child.props.style
         ];
-        const element2 = import_react10.default.cloneElement(child, {
+        const element2 = import_react13.default.cloneElement(child, {
           key,
           style: mergedStyle
         });
@@ -437,8 +510,8 @@ var Grid = ({
         return element2;
       }
       const defaultItemWidth = baseItemWidth === void 0 ? itemWidth : baseItemWidth;
-      const element = /* @__PURE__ */ import_react10.default.createElement(
-        import_react_native10.View,
+      const element = /* @__PURE__ */ import_react13.default.createElement(
+        import_react_native12.View,
         {
           key,
           style: [
@@ -461,8 +534,8 @@ var Grid = ({
 };
 
 // src/components/view/grid/grid-builder.tsx
-var import_react11 = __toESM(require("react"), 1);
-var import_react_native11 = require("react-native");
+var import_react14 = __toESM(require("react"), 1);
+var import_react_native13 = require("react-native");
 var getSafeColumns2 = (columns) => {
   if (!columns || columns <= 0) return 1;
   return Math.floor(columns);
@@ -494,11 +567,11 @@ var GridBuilder = ({
   const safeColumns = getSafeColumns2(columns);
   const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
   const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
-  const resolvedData = (0, import_react11.useMemo)(
+  const resolvedData = (0, import_react14.useMemo)(
     () => resolveGridData(data, itemCount),
     [data, itemCount]
   );
-  const paddedData = (0, import_react11.useMemo)(() => {
+  const paddedData = (0, import_react14.useMemo)(() => {
     const remainder = resolvedData.length % safeColumns;
     const placeholders = remainder === 0 ? 0 : safeColumns - remainder;
     if (placeholders === 0)
@@ -519,12 +592,12 @@ var GridBuilder = ({
       }))
     ];
   }, [resolvedData, safeColumns]);
-  const resolvedKeyExtractor = (0, import_react11.useMemo)(() => {
+  const resolvedKeyExtractor = (0, import_react14.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)(() => {
+  const resolvedRenderer = (0, import_react14.useMemo)(() => {
     if (renderItem) return renderItem;
     if (itemBuilder)
       return ({ item, index }) => itemBuilder({ item, index });
@@ -548,7 +621,7 @@ var GridBuilder = ({
         },
         itemStyle
       ];
-      return /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: placeholderStyle, pointerEvents: "none" });
+      return /* @__PURE__ */ import_react14.default.createElement(import_react_native13.View, { style: placeholderStyle, pointerEvents: "none" });
     }
     const element = resolvedRenderer({ item: item.item, index: item.index });
     if (element === null) return null;
@@ -564,9 +637,9 @@ var GridBuilder = ({
       },
       itemStyle
     ];
-    return /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: wrapperStyle }, element);
+    return /* @__PURE__ */ import_react14.default.createElement(import_react_native13.View, { style: wrapperStyle }, element);
   };
-  const flattenedStyle = import_react_native11.StyleSheet.flatten(style) ?? {};
+  const flattenedStyle = import_react_native13.StyleSheet.flatten(style) ?? {};
   const {
     alignItems,
     justifyContent,
@@ -585,8 +658,8 @@ var GridBuilder = ({
     ...columnGap !== void 0 ? { columnGap } : {}
   };
   const hasLayoutStyle = Object.keys(layoutStyle).length > 0;
-  return /* @__PURE__ */ import_react11.default.createElement(
-    import_react_native11.FlatList,
+  return /* @__PURE__ */ import_react14.default.createElement(
+    import_react_native13.FlatList,
     {
       data: paddedData,
       renderItem: renderGridItem,
@@ -605,8 +678,8 @@ var GridBuilder = ({
 GridBuilder.displayName = "GridBuilder";
 
 // src/components/view/conditional/conditional-view.tsx
-var import_react12 = __toESM(require("react"), 1);
-var import_react_native13 = require("react-native");
+var import_react15 = __toESM(require("react"), 1);
+var import_react_native15 = require("react-native");
 
 // src/components/view/conditional/conditional-view.utils.ts
 var FINAL_VALUES = {
@@ -635,7 +708,7 @@ var getExitValues = (animation) => {
 };
 
 // src/components/view/conditional/conditional-view.animation.ts
-var import_react_native12 = require("react-native");
+var import_react_native14 = require("react-native");
 var runConditionalViewAnimation = ({
   opacity,
   scale,
@@ -644,27 +717,27 @@ var runConditionalViewAnimation = ({
   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, {
+  const easing = import_react_native14.Easing.out(import_react_native14.Easing.cubic);
+  const animation = import_react_native14.Animated.parallel([
+    import_react_native14.Animated.timing(opacity, {
       toValue: toValues.opacity,
       duration: 800,
       easing,
       useNativeDriver: true
     }),
-    import_react_native12.Animated.timing(scale, {
+    import_react_native14.Animated.timing(scale, {
       toValue: toValues.scale,
       duration: 800,
       easing,
       useNativeDriver: true
     }),
-    import_react_native12.Animated.timing(translateX, {
+    import_react_native14.Animated.timing(translateX, {
       toValue: toValues.translateX,
       duration: 800,
       easing,
       useNativeDriver: true
     }),
-    import_react_native12.Animated.timing(translateY, {
+    import_react_native14.Animated.timing(translateY, {
       toValue: toValues.translateY,
       duration: 800,
       easing,
@@ -686,34 +759,34 @@ var ConditionalView = ({
   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(
+  const [shouldRender, setShouldRender] = (0, import_react15.useState)(isVisible);
+  const animationRef = (0, import_react15.useRef)(null);
+  const initialValues = (0, import_react15.useMemo)(() => getInitialValues(animation), [animation]);
+  const exitValues = (0, import_react15.useMemo)(() => getExitValues(animation), [animation]);
+  const opacity = (0, import_react15.useRef)(
+    new import_react_native15.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)
+  const scale = (0, import_react15.useRef)(
+    new import_react_native15.Animated.Value(disableAnimation ? FINAL_VALUES.scale : initialValues.scale)
   ).current;
-  const translateX = (0, import_react12.useRef)(
-    new import_react_native13.Animated.Value(
+  const translateX = (0, import_react15.useRef)(
+    new import_react_native15.Animated.Value(
       disableAnimation ? FINAL_VALUES.translateX : initialValues.translateX
     )
   ).current;
-  const translateY = (0, import_react12.useRef)(
-    new import_react_native13.Animated.Value(
+  const translateY = (0, import_react15.useRef)(
+    new import_react_native15.Animated.Value(
       disableAnimation ? FINAL_VALUES.translateY : initialValues.translateY
     )
   ).current;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (isVisible) {
       setShouldRender(true);
     }
   }, [isVisible]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!shouldRender) return;
     const startValues = isVisible ? disableAnimation ? FINAL_VALUES : initialValues : FINAL_VALUES;
     const targetValues = isVisible ? FINAL_VALUES : exitValues;
@@ -747,7 +820,7 @@ var ConditionalView = ({
     translateX,
     translateY
   ]);
-  const animatedStyle = (0, import_react12.useMemo)(
+  const animatedStyle = (0, import_react15.useMemo)(
     () => ({
       opacity,
       transform: [{ translateX }, { translateY }, { scale }]
@@ -757,18 +830,18 @@ var ConditionalView = ({
   if (!shouldRender) {
     return null;
   }
-  return /* @__PURE__ */ import_react12.default.createElement(import_react_native13.Animated.View, { style: animatedStyle }, children);
+  return /* @__PURE__ */ import_react15.default.createElement(import_react_native15.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 import_react16 = __toESM(require("react"), 1);
+var import_react_native16 = 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}`;
+  return import_react16.default.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
 };
 var MasonryGrid = ({
   children,
@@ -779,25 +852,25 @@ var MasonryGrid = ({
   style,
   columnStyle
 }) => {
-  const [containerWidth, setContainerWidth] = (0, import_react13.useState)();
-  const heightMapRef = (0, import_react13.useRef)({});
-  const [layoutVersion, setLayoutVersion] = (0, import_react13.useState)(0);
+  const [containerWidth, setContainerWidth] = (0, import_react16.useState)();
+  const heightMapRef = (0, import_react16.useRef)({});
+  const [layoutVersion, setLayoutVersion] = (0, import_react16.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)(() => {
+  const columnWidth = (0, import_react16.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) => ({
+  const items = (0, import_react16.useMemo)(
+    () => import_react16.default.Children.toArray(children).map((child, index) => ({
       key: getItemKey(child, index),
       element: child
     })),
     [children]
   );
-  const columnsItems = (0, import_react13.useMemo)(() => {
+  const columnsItems = (0, import_react16.useMemo)(() => {
     const buckets = Array.from({ length: safeColumns }, () => []);
     const heights = new Array(safeColumns).fill(0);
     items.forEach((item) => {
@@ -808,8 +881,8 @@ var MasonryGrid = ({
     });
     return buckets;
   }, [items, layoutVersion, resolvedRowSpacing, safeColumns]);
-  return /* @__PURE__ */ import_react13.default.createElement(
-    import_react_native14.View,
+  return /* @__PURE__ */ import_react16.default.createElement(
+    import_react_native16.View,
     {
       style: [
         {
@@ -832,10 +905,10 @@ var MasonryGrid = ({
         },
         columnStyle
       ];
-      return /* @__PURE__ */ import_react13.default.createElement(import_react_native14.View, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
+      return /* @__PURE__ */ import_react16.default.createElement(import_react_native16.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,
+        return /* @__PURE__ */ import_react16.default.createElement(
+          import_react_native16.View,
           {
             key: item.key,
             style: { marginBottom: isLastRow ? 0 : resolvedRowSpacing },
@@ -854,19 +927,19 @@ var MasonryGrid = ({
 };
 
 // src/components/view/masonry-grid/masonry-grid-item.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_react_native15 = require("react-native");
+var import_react17 = __toESM(require("react"), 1);
+var import_react_native17 = require("react-native");
 var MasonryGridItem = ({
   children,
   style
 }) => {
-  return /* @__PURE__ */ import_react14.default.createElement(import_react_native15.View, { style }, children);
+  return /* @__PURE__ */ import_react17.default.createElement(import_react_native17.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 import_react18 = __toESM(require("react"), 1);
+var import_react_native18 = require("react-native");
 var resolveMasonryData = (data, itemCount) => {
   if (data) return data;
   if (!itemCount || itemCount <= 0) return [];
@@ -895,21 +968,21 @@ var MasonryGridBuilder = ({
   bounces,
   onScroll
 }) => {
-  const resolvedData = (0, import_react15.useMemo)(
+  const resolvedData = (0, import_react18.useMemo)(
     () => resolveMasonryData(data, itemCount),
     [data, itemCount]
   );
-  const resolvedKeyExtractor = (0, import_react15.useMemo)(() => {
+  const resolvedKeyExtractor = (0, import_react18.useMemo)(() => {
     if (keyExtractor) return keyExtractor;
     return (_, index) => `masonry-${index}`;
   }, [keyExtractor]);
-  const resolvedRenderer = (0, import_react15.useMemo)(() => {
+  const resolvedRenderer = (0, import_react18.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);
+  const lastEndReachedHeight = (0, import_react18.useRef)(0);
   if (!resolvedRenderer) return null;
   const handleScroll = (event) => {
     onScroll?.(event);
@@ -923,8 +996,8 @@ var MasonryGridBuilder = ({
       onEndReached();
     }
   };
-  return /* @__PURE__ */ import_react15.default.createElement(
-    import_react_native16.ScrollView,
+  return /* @__PURE__ */ import_react18.default.createElement(
+    import_react_native18.ScrollView,
     {
       scrollEventThrottle: 16,
       scrollEnabled,
@@ -935,7 +1008,7 @@ var MasonryGridBuilder = ({
       onScroll: handleScroll
     },
     header,
-    /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react18.default.createElement(
       MasonryGrid,
       {
         columns,
@@ -945,7 +1018,7 @@ var MasonryGridBuilder = ({
         style: [{ width: "100%" }, style],
         columnStyle
       },
-      resolvedData.map((item, index) => /* @__PURE__ */ import_react15.default.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
+      resolvedData.map((item, index) => /* @__PURE__ */ import_react18.default.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
     ),
     footer
   );
@@ -953,6 +1026,7 @@ var MasonryGridBuilder = ({
 MasonryGridBuilder.displayName = "MasonryGridBuilder";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AspectRatio,
   BlurView,
   Column,
   ConditionalView,
@@ -965,6 +1039,7 @@ MasonryGridBuilder.displayName = "MasonryGridBuilder";
   MasonryGridItem,
   Padding,
   PositionedView,
+  RoundedView,
   Row,
   SizedBox,
   Spacer