@xaui/native 0.2.1 → 0.2.3

package/dist/alert/index.cjs

@@ -18,8 +18,8 @@ var _reactnative = require('react-native');
 
 
 
-
 var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+var _reactnativeworklets = require('react-native-worklets');
 
 // src/components/alert/alert.style.ts
 
@@ -254,7 +254,7 @@ var Alert = ({
     opacity.value = _reactnativereanimated.withTiming.call(void 0, 0, { duration: 250 });
     scale.value = _reactnativereanimated.withTiming.call(void 0, 0.95, { duration: 250 }, (finished) => {
       if (finished) {
-        _reactnativereanimated.runOnJS.call(void 0, finishClosing)();
+        _reactnativeworklets.scheduleOnRN.call(void 0, finishClosing);
       }
     });
   }, [finishClosing, opacity, scale, visible]);

package/dist/alert/index.js

@@ -15,11 +15,11 @@ import React2, {
 } from "react";
 import { Pressable, Text, View } from "react-native";
 import Animated, {
-  useSharedValue,
   useAnimatedStyle,
-  withTiming,
-  runOnJS
+  useSharedValue,
+  withTiming
 } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 
 // src/components/alert/alert.style.ts
 import { StyleSheet } from "react-native";
@@ -254,7 +254,7 @@ var Alert = ({
     opacity.value = withTiming(0, { duration: 250 });
     scale.value = withTiming(0.95, { duration: 250 }, (finished) => {
       if (finished) {
-        runOnJS(finishClosing)();
+        scheduleOnRN(finishClosing);
       }
     });
   }, [finishClosing, opacity, scale, visible]);

package/dist/dialog/index.cjs

@@ -19,8 +19,8 @@ var _reactnative = require('react-native');
 
 
 
-
 var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+var _reactnativeworklets = require('react-native-worklets');
 var _core = require('@xaui/core');
 var _icons = require('@xaui/icons');
 
@@ -263,7 +263,7 @@ var Dialog = ({
       },
       (finished) => {
         if (finished) {
-          _reactnativereanimated.runOnJS.call(void 0, finishClosing)();
+          _reactnativeworklets.scheduleOnRN.call(void 0, finishClosing);
         }
       }
     );

package/dist/dialog/index.js

@@ -16,11 +16,11 @@ import React, {
 import { Modal, Pressable, Text, View } from "react-native";
 import Animated, {
   Easing,
-  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withTiming
 } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 import { withOpacity } from "@xaui/core";
 import { CloseIcon } from "@xaui/icons";
 
@@ -263,7 +263,7 @@ var Dialog = ({
       },
       (finished) => {
         if (finished) {
-          runOnJS(finishClosing)();
+          scheduleOnRN(finishClosing);
         }
       }
     );

package/dist/view/index.cjs

@@ -39,7 +39,8 @@ var Column = ({
   spacing,
   reverse = false,
   fullWidth,
-  style
+  style,
+  noGrowth = false
 }) => {
   const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
   const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
@@ -48,7 +49,7 @@ var Column = ({
     {
       style: [
         {
-          flex: 1,
+          flex: noGrowth ? void 0 : 1,
           flexDirection: reverse ? "column-reverse" : "column",
           justifyContent: resolveMainAxisAlignment(mainAxisAlignment),
           alignItems: resolveCrossAxisAlignment(crossAxisAlignment)
@@ -127,7 +128,8 @@ var Padding = ({
   bottom,
   left,
   fullWidth,
-  style
+  style,
+  noGrowth = false
 }) => {
   const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ _react2.default.createElement(
@@ -135,7 +137,7 @@ var Padding = ({
     {
       style: [
         {
-          flex: 1,
+          flex: noGrowth ? void 0 : 1,
           padding: all,
           paddingHorizontal: horizontal,
           paddingVertical: vertical,
@@ -166,7 +168,8 @@ var Margin = ({
   bottom,
   left,
   fullWidth,
-  style
+  style,
+  noGrowth = false
 }) => {
   const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ _react2.default.createElement(
@@ -174,7 +177,7 @@ var Margin = ({
     {
       style: [
         {
-          flex: 1,
+          flex: noGrowth ? void 0 : 1,
           margin: all,
           marginHorizontal: horizontal,
           marginVertical: vertical,
@@ -347,7 +350,8 @@ var RoundedView = ({
   bottomRight,
   fullWidth = false,
   backgroundColor,
-  style
+  style,
+  noGrowth = false
 }) => {
   const borderRadiusStyle = useRoundedViewStyle({
     all,
@@ -365,7 +369,8 @@ var RoundedView = ({
     {
       style: [
         borderRadiusStyle,
-        fullWidth && styles2.fullWidth,
+        fullWidth && { width: "100%" },
+        noGrowth ? void 0 : { flex: 1 },
         backgroundColor && { backgroundColor },
         style
       ]
@@ -373,14 +378,6 @@ var RoundedView = ({
     children
   );
 };
-var styles2 = _reactnative.StyleSheet.create({
-  fullWidth: {
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: "auto",
-    width: "100%"
-  }
-});
 
 // src/components/view/aspect-ratio/aspect-ratio.tsx
 
@@ -433,17 +430,53 @@ var Surface = ({
 };
 Surface.displayName = "Surface";
 
+// src/components/view/screen/screen.tsx
+
+
+var _reactnativesafeareacontext = require('react-native-safe-area-context');
+var Screen = ({
+  children,
+  padding,
+  backgroundColor,
+  safeArea = false,
+  style
+}) => {
+  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
+  );
+};
+Screen.displayName = "Screen";
+
 // src/components/view/center/center.tsx
 
 
-var Center = ({ children, fullWidth, style }) => {
+var Center = ({
+  children,
+  fullWidth,
+  style,
+  noGrowth = false
+}) => {
   const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
       style: [
         {
-          flex: 1,
+          flex: noGrowth ? void 0 : 1,
           alignItems: "center",
           justifyContent: "center"
         },
@@ -1092,4 +1125,5 @@ 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.SizedBox = SizedBox; exports.Spacer = Spacer; exports.Surface = Surface;
+
+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;

package/dist/view/index.d.cts

@@ -1,5 +1,5 @@
 import React, { ReactNode, ReactElement, ComponentType } from 'react';
-import { ViewStyle, StyleProp, ColorValue, ScrollViewProps } from 'react-native';
+import { StyleProp, ViewStyle, ColorValue, ScrollViewProps } from 'react-native';
 import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.cjs';
 
 type MainAxisAlignment = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
@@ -36,9 +36,15 @@ type RowProps = {
     /**
      * Custom style for the row container.
      */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
+};
+type ColumnProps = RowProps & {
+    /**
+     * If true, the container will grow to fill available space.
+     * @default false
+     */
+    noGrowth?: boolean;
 };
-type ColumnProps = RowProps;
 
 declare const Column: React.FC<ColumnProps>;
 
@@ -96,6 +102,11 @@ type PaddingProps = {
      * @default false
      */
     fullWidth?: boolean;
+    /**
+     * If true, the padding container will grow to fill available space.
+     * @default false
+     */
+    noGrowth?: boolean;
     /**
      * Custom style for the padding container.
      */
@@ -142,6 +153,11 @@ type MarginProps = {
      * @default false
      */
     fullWidth?: boolean;
+    /**
+     * If true, the margin container will grow to fill available space.
+     * @default false
+     */
+    noGrowth?: boolean;
     /**
      * Custom style for the margin container.
      */
@@ -269,6 +285,11 @@ type RoundedViewProps = {
      * Background color of the view
      */
     backgroundColor?: string;
+    /**
+     * If true, the view will NOT automatically grow to fill available space (e.g., via flex: 1).
+     * @default false
+     */
+    noGrowth?: boolean;
     /**
      * Custom style for the view
      */
@@ -330,6 +351,33 @@ type SurfaceProps = {
 
 declare const Surface: React.FC<SurfaceProps>;
 
+type ScreenProps = {
+    /**
+     * Content rendered inside the screen container.
+     */
+    children: ReactNode;
+    /**
+     * Uniform padding applied to the screen.
+     */
+    padding?: number;
+    /**
+     * Optional custom background color.
+     * Uses theme background by default.
+     */
+    backgroundColor?: string;
+    /**
+     * Wrap content in a SafeAreaView.
+     * @default false
+     */
+    safeArea?: boolean;
+    /**
+     * Additional container styles.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Screen: React.FC<ScreenProps>;
+
 type CenterProps = {
     /**
      * Content to render inside the centered container.
@@ -340,6 +388,11 @@ type CenterProps = {
      * @default false
      */
     fullWidth?: boolean;
+    /**
+     * If true, disables automatic growth (e.g. prevents using flex: 1 to fill available space).
+     * @default false
+     */
+    noGrowth?: boolean;
     /**
      * Additional style for the container.
      */
@@ -659,4 +712,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };
+export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, Screen, type ScreenProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };

package/dist/view/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, ReactElement, ComponentType } from 'react';
-import { ViewStyle, StyleProp, ColorValue, ScrollViewProps } from 'react-native';
+import { StyleProp, ViewStyle, ColorValue, ScrollViewProps } from 'react-native';
 import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.js';
 
 type MainAxisAlignment = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
@@ -36,9 +36,15 @@ type RowProps = {
     /**
      * Custom style for the row container.
      */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
+};
+type ColumnProps = RowProps & {
+    /**
+     * If true, the container will grow to fill available space.
+     * @default false
+     */
+    noGrowth?: boolean;
 };
-type ColumnProps = RowProps;
 
 declare const Column: React.FC<ColumnProps>;
 
@@ -96,6 +102,11 @@ type PaddingProps = {
      * @default false
      */
     fullWidth?: boolean;
+    /**
+     * If true, the padding container will grow to fill available space.
+     * @default false
+     */
+    noGrowth?: boolean;
     /**
      * Custom style for the padding container.
      */
@@ -142,6 +153,11 @@ type MarginProps = {
      * @default false
      */
     fullWidth?: boolean;
+    /**
+     * If true, the margin container will grow to fill available space.
+     * @default false
+     */
+    noGrowth?: boolean;
     /**
      * Custom style for the margin container.
      */
@@ -269,6 +285,11 @@ type RoundedViewProps = {
      * Background color of the view
      */
     backgroundColor?: string;
+    /**
+     * If true, the view will NOT automatically grow to fill available space (e.g., via flex: 1).
+     * @default false
+     */
+    noGrowth?: boolean;
     /**
      * Custom style for the view
      */
@@ -330,6 +351,33 @@ type SurfaceProps = {
 
 declare const Surface: React.FC<SurfaceProps>;
 
+type ScreenProps = {
+    /**
+     * Content rendered inside the screen container.
+     */
+    children: ReactNode;
+    /**
+     * Uniform padding applied to the screen.
+     */
+    padding?: number;
+    /**
+     * Optional custom background color.
+     * Uses theme background by default.
+     */
+    backgroundColor?: string;
+    /**
+     * Wrap content in a SafeAreaView.
+     * @default false
+     */
+    safeArea?: boolean;
+    /**
+     * Additional container styles.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Screen: React.FC<ScreenProps>;
+
 type CenterProps = {
     /**
      * Content to render inside the centered container.
@@ -340,6 +388,11 @@ type CenterProps = {
      * @default false
      */
     fullWidth?: boolean;
+    /**
+     * If true, disables automatic growth (e.g. prevents using flex: 1 to fill available space).
+     * @default false
+     */
+    noGrowth?: boolean;
     /**
      * Additional style for the container.
      */
@@ -659,4 +712,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };
+export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, Screen, type ScreenProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };

package/dist/view/index.js

@@ -39,7 +39,8 @@ var Column = ({
   spacing,
   reverse = false,
   fullWidth,
-  style
+  style,
+  noGrowth = false
 }) => {
   const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
   const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
@@ -48,7 +49,7 @@ var Column = ({
     {
       style: [
         {
-          flex: 1,
+          flex: noGrowth ? void 0 : 1,
           flexDirection: reverse ? "column-reverse" : "column",
           justifyContent: resolveMainAxisAlignment(mainAxisAlignment),
           alignItems: resolveCrossAxisAlignment(crossAxisAlignment)
@@ -127,7 +128,8 @@ var Padding = ({
   bottom,
   left,
   fullWidth,
-  style
+  style,
+  noGrowth = false
 }) => {
   const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ React4.createElement(
@@ -135,7 +137,7 @@ var Padding = ({
     {
       style: [
         {
-          flex: 1,
+          flex: noGrowth ? void 0 : 1,
           padding: all,
           paddingHorizontal: horizontal,
           paddingVertical: vertical,
@@ -166,7 +168,8 @@ var Margin = ({
   bottom,
   left,
   fullWidth,
-  style
+  style,
+  noGrowth = false
 }) => {
   const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ React5.createElement(
@@ -174,7 +177,7 @@ var Margin = ({
     {
       style: [
         {
-          flex: 1,
+          flex: noGrowth ? void 0 : 1,
           margin: all,
           marginHorizontal: horizontal,
           marginVertical: vertical,
@@ -307,7 +310,7 @@ BlurView.displayName = "BlurView";
 
 // src/components/view/rounded-view/rounded-view.tsx
 import React9 from "react";
-import { View as View9, StyleSheet as StyleSheet2 } from "react-native";
+import { View as View9 } from "react-native";
 
 // src/components/view/rounded-view/rounded-view.hook.ts
 import { useMemo } from "react";
@@ -347,7 +350,8 @@ var RoundedView = ({
   bottomRight,
   fullWidth = false,
   backgroundColor,
-  style
+  style,
+  noGrowth = false
 }) => {
   const borderRadiusStyle = useRoundedViewStyle({
     all,
@@ -365,7 +369,8 @@ var RoundedView = ({
     {
       style: [
         borderRadiusStyle,
-        fullWidth && styles2.fullWidth,
+        fullWidth && { width: "100%" },
+        noGrowth ? void 0 : { flex: 1 },
         backgroundColor && { backgroundColor },
         style
       ]
@@ -373,14 +378,6 @@ var RoundedView = ({
     children
   );
 };
-var styles2 = StyleSheet2.create({
-  fullWidth: {
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: "auto",
-    width: "100%"
-  }
-});
 
 // src/components/view/aspect-ratio/aspect-ratio.tsx
 import React10 from "react";
@@ -433,17 +430,53 @@ var Surface = ({
 };
 Surface.displayName = "Surface";
 
-// src/components/view/center/center.tsx
+// src/components/view/screen/screen.tsx
 import React12 from "react";
 import { View as View12 } from "react-native";
-var Center = ({ children, fullWidth, style }) => {
-  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
+import { SafeAreaView } from "react-native-safe-area-context";
+var Screen = ({
+  children,
+  padding,
+  backgroundColor,
+  safeArea = false,
+  style
+}) => {
+  const theme = useXUITheme();
+  const resolvedBackgroundColor = backgroundColor ?? theme.colors.background;
+  const Container = safeArea ? SafeAreaView : View12;
   return /* @__PURE__ */ React12.createElement(
-    View12,
+    Container,
     {
       style: [
         {
           flex: 1,
+          backgroundColor: resolvedBackgroundColor,
+          padding
+        },
+        style
+      ]
+    },
+    children
+  );
+};
+Screen.displayName = "Screen";
+
+// 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"
         },
@@ -457,16 +490,16 @@ var Center = ({ children, fullWidth, style }) => {
 Center.displayName = "Center";
 
 // src/components/view/grid/grid.tsx
-import React14, { useMemo as useMemo2, useState } from "react";
+import React15, { useMemo as useMemo2, useState } from "react";
 import {
-  View as View14
+  View as View15
 } from "react-native";
 
 // src/components/view/grid/grid-item.tsx
-import React13 from "react";
-import { View as View13 } from "react-native";
+import React14 from "react";
+import { View as View14 } from "react-native";
 var GridItem = ({ children, style }) => {
-  return /* @__PURE__ */ React13.createElement(View13, { style }, children);
+  return /* @__PURE__ */ React14.createElement(View14, { style }, children);
 };
 GridItem.displayName = "GridItem";
 
@@ -480,7 +513,7 @@ var getSafeSpan = (span, columns) => {
   return Math.min(Math.floor(span), columns);
 };
 var isGridItemElement = (child) => {
-  if (!React14.isValidElement(child)) return false;
+  if (!React15.isValidElement(child)) return false;
   if (child.type === GridItem) return true;
   const displayName = child.type.displayName;
   return displayName === "GridItem";
@@ -499,15 +532,15 @@ var Grid = ({
   const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
   const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
   const itemWidth = `${100 / safeColumns}%`;
-  const items = React14.Children.toArray(children);
+  const items = React15.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__ */ React14.createElement(
-    View14,
+  return /* @__PURE__ */ React15.createElement(
+    View15,
     {
       style: [
         {
@@ -524,7 +557,7 @@ var Grid = ({
       }
     },
     items.map((child, index) => {
-      const key = React14.isValidElement(child) && child.key ? child.key : `grid-${index}`;
+      const key = React15.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) {
@@ -544,7 +577,7 @@ var Grid = ({
           itemStyle,
           child.props.style
         ];
-        const element2 = React14.cloneElement(child, {
+        const element2 = React15.cloneElement(child, {
           key,
           style: mergedStyle
         });
@@ -552,8 +585,8 @@ var Grid = ({
         return element2;
       }
       const defaultItemWidth = baseItemWidth === void 0 ? itemWidth : baseItemWidth;
-      const element = /* @__PURE__ */ React14.createElement(
-        View14,
+      const element = /* @__PURE__ */ React15.createElement(
+        View15,
         {
           key,
           style: [
@@ -576,11 +609,11 @@ var Grid = ({
 };
 
 // src/components/view/grid/grid-builder.tsx
-import React15, { useMemo as useMemo3 } from "react";
+import React16, { useMemo as useMemo3 } from "react";
 import {
   FlatList,
-  StyleSheet as StyleSheet3,
-  View as View15
+  StyleSheet as StyleSheet2,
+  View as View16
 } from "react-native";
 var getSafeColumns2 = (columns) => {
   if (!columns || columns <= 0) return 1;
@@ -667,7 +700,7 @@ var GridBuilder = ({
         },
         itemStyle
       ];
-      return /* @__PURE__ */ React15.createElement(View15, { style: placeholderStyle, pointerEvents: "none" });
+      return /* @__PURE__ */ React16.createElement(View16, { style: placeholderStyle, pointerEvents: "none" });
     }
     const element = resolvedRenderer({ item: item.item, index: item.index });
     if (element === null) return null;
@@ -683,9 +716,9 @@ var GridBuilder = ({
       },
       itemStyle
     ];
-    return /* @__PURE__ */ React15.createElement(View15, { style: wrapperStyle }, element);
+    return /* @__PURE__ */ React16.createElement(View16, { style: wrapperStyle }, element);
   };
-  const flattenedStyle = StyleSheet3.flatten(style) ?? {};
+  const flattenedStyle = StyleSheet2.flatten(style) ?? {};
   const {
     alignItems,
     justifyContent,
@@ -704,7 +737,7 @@ var GridBuilder = ({
     ...columnGap !== void 0 ? { columnGap } : {}
   };
   const hasLayoutStyle = Object.keys(layoutStyle).length > 0;
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     FlatList,
     {
       data: paddedData,
@@ -724,7 +757,7 @@ var GridBuilder = ({
 GridBuilder.displayName = "GridBuilder";
 
 // src/components/view/conditional/conditional-view.tsx
-import React16, { useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
+import React17, { 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
@@ -876,18 +909,18 @@ var ConditionalView = ({
   if (!shouldRender) {
     return null;
   }
-  return /* @__PURE__ */ React16.createElement(Animated3.View, { style: animatedStyle }, children);
+  return /* @__PURE__ */ React17.createElement(Animated3.View, { style: animatedStyle }, children);
 };
 
 // src/components/view/masonry-grid/masonry-grid.tsx
-import React17, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
-import { View as View16 } from "react-native";
+import React18, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
+import { View as View17 } from "react-native";
 var getSafeColumns3 = (columns) => {
   if (!columns || columns <= 0) return 1;
   return Math.floor(columns);
 };
 var getItemKey = (child, index) => {
-  return React17.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
+  return React18.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
 };
 var MasonryGrid = ({
   children,
@@ -910,7 +943,7 @@ var MasonryGrid = ({
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
   const items = useMemo5(
-    () => React17.Children.toArray(children).map((child, index) => ({
+    () => React18.Children.toArray(children).map((child, index) => ({
       key: getItemKey(child, index),
       element: child
     })),
@@ -927,8 +960,8 @@ var MasonryGrid = ({
     });
     return buckets;
   }, [items, layoutVersion, resolvedRowSpacing, safeColumns]);
-  return /* @__PURE__ */ React17.createElement(
-    View16,
+  return /* @__PURE__ */ React18.createElement(
+    View17,
     {
       style: [
         {
@@ -951,10 +984,10 @@ var MasonryGrid = ({
         },
         columnStyle
       ];
-      return /* @__PURE__ */ React17.createElement(View16, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
+      return /* @__PURE__ */ React18.createElement(View17, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
         const isLastRow = index === column.length - 1;
-        return /* @__PURE__ */ React17.createElement(
-          View16,
+        return /* @__PURE__ */ React18.createElement(
+          View17,
           {
             key: item.key,
             style: { marginBottom: isLastRow ? 0 : resolvedRowSpacing },
@@ -973,18 +1006,18 @@ var MasonryGrid = ({
 };
 
 // src/components/view/masonry-grid/masonry-grid-item.tsx
-import React18 from "react";
-import { View as View17 } from "react-native";
+import React19 from "react";
+import { View as View18 } from "react-native";
 var MasonryGridItem = ({
   children,
   style
 }) => {
-  return /* @__PURE__ */ React18.createElement(View17, { style }, children);
+  return /* @__PURE__ */ React19.createElement(View18, { style }, children);
 };
 MasonryGridItem.displayName = "MasonryGridItem";
 
 // src/components/view/masonry-grid/masonry-grid-builder.tsx
-import React19, { useMemo as useMemo6, useRef as useRef4 } from "react";
+import React20, { useMemo as useMemo6, useRef as useRef4 } from "react";
 import {
   ScrollView
 } from "react-native";
@@ -1044,7 +1077,7 @@ var MasonryGridBuilder = ({
       onEndReached();
     }
   };
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     ScrollView,
     {
       scrollEventThrottle: 16,
@@ -1056,7 +1089,7 @@ var MasonryGridBuilder = ({
       onScroll: handleScroll
     },
     header,
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(
       MasonryGrid,
       {
         columns,
@@ -1066,7 +1099,7 @@ var MasonryGridBuilder = ({
         style: [{ width: "100%" }, style],
         columnStyle
       },
-      resolvedData.map((item, index) => /* @__PURE__ */ React19.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
+      resolvedData.map((item, index) => /* @__PURE__ */ React20.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
     ),
     footer
   );
@@ -1089,6 +1122,7 @@ export {
   PositionedView,
   RoundedView,
   Row,
+  Screen,
   SizedBox,
   Spacer,
   Surface

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
@@ -276,6 +276,8 @@
     "react-native": ">=0.70.0",
     "react-native-gesture-handler": ">=2.0.0",
     "react-native-reanimated": ">=4.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-worklets": ">=0.5.0",
     "react-native-svg": ">=15.0.0"
   },
   "devDependencies": {
@@ -285,6 +287,8 @@
     "react-native": "^0.81.5",
     "react-native-gesture-handler": "^2.28.0",
     "react-native-reanimated": "^4.0.0",
+    "react-native-safe-area-context": "^5.6.0",
+    "react-native-worklets": "^0.5.1",
     "react-native-svg": "^15.8.0",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"