@xaui/native 0.1.0 → 0.1.1

package/dist/view/index.cjs

@@ -42,7 +42,7 @@ var Column = ({
   style
 }) => {
   const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%", flexGrow: 1 } : { flexGrow: 1 };
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -74,7 +74,7 @@ var Row = ({
   style
 }) => {
   const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -128,7 +128,7 @@ var Padding = ({
   fullWidth,
   style
 }) => {
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : { flexGrow: 1 };
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -166,7 +166,7 @@ var Margin = ({
   fullWidth,
   style
 }) => {
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : { flexGrow: 1 };
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -369,6 +369,9 @@ var RoundedView = ({
 };
 var styles2 = _reactnative.StyleSheet.create({
   fullWidth: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%"
   }
 });
@@ -400,6 +403,7 @@ var Surface = ({
   themeColor = "background",
   padding,
   radius = "none",
+  fullWidth = false,
   style
 }) => {
   const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
@@ -410,8 +414,13 @@ var Surface = ({
     {
       style: [
         radiusStyle,
+        fullWidth && {
+          flexShrink: 1,
+          flexBasis: "auto",
+          width: "100%",
+          flexGrow: 1
+        },
         {
-          flex: 1,
           backgroundColor: background,
           padding
         },
@@ -423,6 +432,32 @@ var Surface = ({
 };
 Surface.displayName = "Surface";
 
+// src/components/view/center/center.tsx
+
+
+var Center = ({
+  children,
+  fullWidth = false,
+  style
+}) => {
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : { flexGrow: 1 };
+  return /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.View,
+    {
+      style: [
+        {
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        fullWidthStyle,
+        style
+      ]
+    },
+    children
+  );
+};
+Center.displayName = "Center";
+
 // src/components/view/grid/grid.tsx
 
 
@@ -1058,4 +1093,5 @@ MasonryGridBuilder.displayName = "MasonryGridBuilder";
 
 
 
-exports.AspectRatio = AspectRatio; exports.BlurView = BlurView; 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.SizedBox = SizedBox; exports.Spacer = Spacer; exports.Surface = Surface;

package/dist/view/index.d.cts

@@ -312,6 +312,11 @@ type SurfaceProps = {
      * @default 'none'
      */
     radius?: Radius;
+    /**
+     * Force the surface to take the full width.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Additional container styles.
      */
@@ -320,6 +325,24 @@ type SurfaceProps = {
 
 declare const Surface: React.FC<SurfaceProps>;
 
+type CenterProps = {
+    /**
+     * Content to render inside the centered container.
+     */
+    children: ReactNode;
+    /**
+     * Force the container to take the full width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional style for the container.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Center: React.FC<CenterProps>;
+
 type GridProps = {
     /**
      * The grid items to render.
@@ -631,4 +654,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, 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, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };

package/dist/view/index.d.ts

@@ -312,6 +312,11 @@ type SurfaceProps = {
      * @default 'none'
      */
     radius?: Radius;
+    /**
+     * Force the surface to take the full width.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Additional container styles.
      */
@@ -320,6 +325,24 @@ type SurfaceProps = {
 
 declare const Surface: React.FC<SurfaceProps>;
 
+type CenterProps = {
+    /**
+     * Content to render inside the centered container.
+     */
+    children: ReactNode;
+    /**
+     * Force the container to take the full width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional style for the container.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Center: React.FC<CenterProps>;
+
 type GridProps = {
     /**
      * The grid items to render.
@@ -631,4 +654,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, 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, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };

package/dist/view/index.js

@@ -42,7 +42,7 @@ var Column = ({
   style
 }) => {
   const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%", flexGrow: 1 } : { flexGrow: 1 };
   return /* @__PURE__ */ React.createElement(
     View,
     {
@@ -74,7 +74,7 @@ var Row = ({
   style
 }) => {
   const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
   return /* @__PURE__ */ React2.createElement(
     View2,
     {
@@ -128,7 +128,7 @@ var Padding = ({
   fullWidth,
   style
 }) => {
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : { flexGrow: 1 };
   return /* @__PURE__ */ React4.createElement(
     View4,
     {
@@ -166,7 +166,7 @@ var Margin = ({
   fullWidth,
   style
 }) => {
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : { flexGrow: 1 };
   return /* @__PURE__ */ React5.createElement(
     View5,
     {
@@ -369,6 +369,9 @@ var RoundedView = ({
 };
 var styles2 = StyleSheet2.create({
   fullWidth: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%"
   }
 });
@@ -400,6 +403,7 @@ var Surface = ({
   themeColor = "background",
   padding,
   radius = "none",
+  fullWidth = false,
   style
 }) => {
   const theme = useXUITheme();
@@ -410,8 +414,13 @@ var Surface = ({
     {
       style: [
         radiusStyle,
+        fullWidth && {
+          flexShrink: 1,
+          flexBasis: "auto",
+          width: "100%",
+          flexGrow: 1
+        },
         {
-          flex: 1,
           backgroundColor: background,
           padding
         },
@@ -423,17 +432,43 @@ var Surface = ({
 };
 Surface.displayName = "Surface";
 
+// src/components/view/center/center.tsx
+import React12 from "react";
+import { View as View12 } from "react-native";
+var Center = ({
+  children,
+  fullWidth = false,
+  style
+}) => {
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : { flexGrow: 1 };
+  return /* @__PURE__ */ React12.createElement(
+    View12,
+    {
+      style: [
+        {
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        fullWidthStyle,
+        style
+      ]
+    },
+    children
+  );
+};
+Center.displayName = "Center";
+
 // src/components/view/grid/grid.tsx
-import React13, { useMemo as useMemo2, useState } from "react";
+import React14, { useMemo as useMemo2, useState } from "react";
 import {
-  View as View13
+  View as View14
 } from "react-native";
 
 // src/components/view/grid/grid-item.tsx
-import React12 from "react";
-import { View as View12 } from "react-native";
+import React13 from "react";
+import { View as View13 } from "react-native";
 var GridItem = ({ children, style }) => {
-  return /* @__PURE__ */ React12.createElement(View12, { style }, children);
+  return /* @__PURE__ */ React13.createElement(View13, { style }, children);
 };
 GridItem.displayName = "GridItem";
 
@@ -447,7 +482,7 @@ var getSafeSpan = (span, columns) => {
   return Math.min(Math.floor(span), columns);
 };
 var isGridItemElement = (child) => {
-  if (!React13.isValidElement(child)) return false;
+  if (!React14.isValidElement(child)) return false;
   if (child.type === GridItem) return true;
   const displayName = child.type.displayName;
   return displayName === "GridItem";
@@ -466,15 +501,15 @@ var Grid = ({
   const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
   const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
   const itemWidth = `${100 / safeColumns}%`;
-  const items = React13.Children.toArray(children);
+  const items = React14.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__ */ React13.createElement(
-    View13,
+  return /* @__PURE__ */ React14.createElement(
+    View14,
     {
       style: [
         {
@@ -491,7 +526,7 @@ var Grid = ({
       }
     },
     items.map((child, index) => {
-      const key = React13.isValidElement(child) && child.key ? child.key : `grid-${index}`;
+      const key = React14.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) {
@@ -511,7 +546,7 @@ var Grid = ({
           itemStyle,
           child.props.style
         ];
-        const element2 = React13.cloneElement(child, {
+        const element2 = React14.cloneElement(child, {
           key,
           style: mergedStyle
         });
@@ -519,8 +554,8 @@ var Grid = ({
         return element2;
       }
       const defaultItemWidth = baseItemWidth === void 0 ? itemWidth : baseItemWidth;
-      const element = /* @__PURE__ */ React13.createElement(
-        View13,
+      const element = /* @__PURE__ */ React14.createElement(
+        View14,
         {
           key,
           style: [
@@ -543,11 +578,11 @@ var Grid = ({
 };
 
 // src/components/view/grid/grid-builder.tsx
-import React14, { useMemo as useMemo3 } from "react";
+import React15, { useMemo as useMemo3 } from "react";
 import {
   FlatList,
   StyleSheet as StyleSheet3,
-  View as View14
+  View as View15
 } from "react-native";
 var getSafeColumns2 = (columns) => {
   if (!columns || columns <= 0) return 1;
@@ -634,7 +669,7 @@ var GridBuilder = ({
         },
         itemStyle
       ];
-      return /* @__PURE__ */ React14.createElement(View14, { style: placeholderStyle, pointerEvents: "none" });
+      return /* @__PURE__ */ React15.createElement(View15, { style: placeholderStyle, pointerEvents: "none" });
     }
     const element = resolvedRenderer({ item: item.item, index: item.index });
     if (element === null) return null;
@@ -650,7 +685,7 @@ var GridBuilder = ({
       },
       itemStyle
     ];
-    return /* @__PURE__ */ React14.createElement(View14, { style: wrapperStyle }, element);
+    return /* @__PURE__ */ React15.createElement(View15, { style: wrapperStyle }, element);
   };
   const flattenedStyle = StyleSheet3.flatten(style) ?? {};
   const {
@@ -671,7 +706,7 @@ var GridBuilder = ({
     ...columnGap !== void 0 ? { columnGap } : {}
   };
   const hasLayoutStyle = Object.keys(layoutStyle).length > 0;
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     FlatList,
     {
       data: paddedData,
@@ -691,7 +726,7 @@ var GridBuilder = ({
 GridBuilder.displayName = "GridBuilder";
 
 // src/components/view/conditional/conditional-view.tsx
-import React15, { useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
+import React16, { 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
@@ -843,18 +878,18 @@ var ConditionalView = ({
   if (!shouldRender) {
     return null;
   }
-  return /* @__PURE__ */ React15.createElement(Animated3.View, { style: animatedStyle }, children);
+  return /* @__PURE__ */ React16.createElement(Animated3.View, { style: animatedStyle }, children);
 };
 
 // src/components/view/masonry-grid/masonry-grid.tsx
-import React16, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
-import { View as View15 } from "react-native";
+import React17, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
+import { View as View16 } from "react-native";
 var getSafeColumns3 = (columns) => {
   if (!columns || columns <= 0) return 1;
   return Math.floor(columns);
 };
 var getItemKey = (child, index) => {
-  return React16.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
+  return React17.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
 };
 var MasonryGrid = ({
   children,
@@ -877,7 +912,7 @@ var MasonryGrid = ({
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
   const items = useMemo5(
-    () => React16.Children.toArray(children).map((child, index) => ({
+    () => React17.Children.toArray(children).map((child, index) => ({
       key: getItemKey(child, index),
       element: child
     })),
@@ -894,8 +929,8 @@ var MasonryGrid = ({
     });
     return buckets;
   }, [items, layoutVersion, resolvedRowSpacing, safeColumns]);
-  return /* @__PURE__ */ React16.createElement(
-    View15,
+  return /* @__PURE__ */ React17.createElement(
+    View16,
     {
       style: [
         {
@@ -918,10 +953,10 @@ var MasonryGrid = ({
         },
         columnStyle
       ];
-      return /* @__PURE__ */ React16.createElement(View15, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
+      return /* @__PURE__ */ React17.createElement(View16, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
         const isLastRow = index === column.length - 1;
-        return /* @__PURE__ */ React16.createElement(
-          View15,
+        return /* @__PURE__ */ React17.createElement(
+          View16,
           {
             key: item.key,
             style: { marginBottom: isLastRow ? 0 : resolvedRowSpacing },
@@ -940,18 +975,18 @@ var MasonryGrid = ({
 };
 
 // src/components/view/masonry-grid/masonry-grid-item.tsx
-import React17 from "react";
-import { View as View16 } from "react-native";
+import React18 from "react";
+import { View as View17 } from "react-native";
 var MasonryGridItem = ({
   children,
   style
 }) => {
-  return /* @__PURE__ */ React17.createElement(View16, { style }, children);
+  return /* @__PURE__ */ React18.createElement(View17, { style }, children);
 };
 MasonryGridItem.displayName = "MasonryGridItem";
 
 // src/components/view/masonry-grid/masonry-grid-builder.tsx
-import React18, { useMemo as useMemo6, useRef as useRef4 } from "react";
+import React19, { useMemo as useMemo6, useRef as useRef4 } from "react";
 import {
   ScrollView
 } from "react-native";
@@ -1011,7 +1046,7 @@ var MasonryGridBuilder = ({
       onEndReached();
     }
   };
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     ScrollView,
     {
       scrollEventThrottle: 16,
@@ -1023,7 +1058,7 @@ var MasonryGridBuilder = ({
       onScroll: handleScroll
     },
     header,
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement(
       MasonryGrid,
       {
         columns,
@@ -1033,7 +1068,7 @@ var MasonryGridBuilder = ({
         style: [{ width: "100%" }, style],
         columnStyle
       },
-      resolvedData.map((item, index) => /* @__PURE__ */ React18.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
+      resolvedData.map((item, index) => /* @__PURE__ */ React19.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
     ),
     footer
   );
@@ -1042,6 +1077,7 @@ MasonryGridBuilder.displayName = "MasonryGridBuilder";
 export {
   AspectRatio,
   BlurView,
+  Center,
   Column,
   ConditionalView,
   Grid,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",