@xaui/native 0.2.1 → 0.2.2

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
 
@@ -436,14 +433,19 @@ Surface.displayName = "Surface";
 // 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"
         },

package/dist/view/index.d.cts

@@ -38,7 +38,13 @@ type RowProps = {
      */
     style?: ViewStyle;
 };
-type ColumnProps = RowProps;
+type ColumnProps = RowProps & {
+    /**
+     * If true, the container will grow to fill available space.
+     * @default false
+     */
+    noGrowth?: boolean;
+};
 
 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
      */
@@ -340,6 +361,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.
      */

package/dist/view/index.d.ts

@@ -38,7 +38,13 @@ type RowProps = {
      */
     style?: ViewStyle;
 };
-type ColumnProps = RowProps;
+type ColumnProps = RowProps & {
+    /**
+     * If true, the container will grow to fill available space.
+     * @default false
+     */
+    noGrowth?: boolean;
+};
 
 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
      */
@@ -340,6 +361,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.
      */

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";
@@ -436,14 +433,19 @@ Surface.displayName = "Surface";
 // src/components/view/center/center.tsx
 import React12 from "react";
 import { View as View12 } from "react-native";
-var Center = ({ children, fullWidth, style }) => {
+var Center = ({
+  children,
+  fullWidth,
+  style,
+  noGrowth = false
+}) => {
   const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ React12.createElement(
     View12,
     {
       style: [
         {
-          flex: 1,
+          flex: noGrowth ? void 0 : 1,
           alignItems: "center",
           justifyContent: "center"
         },
@@ -579,7 +581,7 @@ var Grid = ({
 import React15, { useMemo as useMemo3 } from "react";
 import {
   FlatList,
-  StyleSheet as StyleSheet3,
+  StyleSheet as StyleSheet2,
   View as View15
 } from "react-native";
 var getSafeColumns2 = (columns) => {
@@ -685,7 +687,7 @@ var GridBuilder = ({
     ];
     return /* @__PURE__ */ React15.createElement(View15, { style: wrapperStyle }, element);
   };
-  const flattenedStyle = StyleSheet3.flatten(style) ?? {};
+  const flattenedStyle = StyleSheet2.flatten(style) ?? {};
   const {
     alignItems,
     justifyContent,

package/package.json

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