@xaui/native 0.1.2 → 0.1.4

package/dist/view/index.cjs

@@ -38,9 +38,11 @@ var Column = ({
   crossAxisAlignment,
   spacing,
   reverse = false,
+  fullWidth,
   style
 }) => {
   const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
+  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -51,6 +53,7 @@ var Column = ({
           justifyContent: resolveMainAxisAlignment(mainAxisAlignment),
           alignItems: resolveCrossAxisAlignment(crossAxisAlignment)
         },
+        fullWidthStyle,
         gapStyle,
         style
       ]
@@ -123,8 +126,10 @@ var Padding = ({
   right,
   bottom,
   left,
+  fullWidth,
   style
 }) => {
+  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -139,6 +144,7 @@ var Padding = ({
           paddingBottom: bottom,
           paddingLeft: left
         },
+        fullWidthStyle,
         style
       ]
     },
@@ -159,8 +165,10 @@ var Margin = ({
   right,
   bottom,
   left,
+  fullWidth,
   style
 }) => {
+  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -175,6 +183,7 @@ var Margin = ({
           marginBottom: bottom,
           marginLeft: left
         },
+        fullWidthStyle,
         style
       ]
     },
@@ -190,8 +199,10 @@ var SizedBox = ({
   children,
   width,
   height,
+  fullWidth,
   style
 }) => {
+  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -200,6 +211,7 @@ var SizedBox = ({
           width,
           height
         },
+        fullWidthStyle,
         style
       ]
     },
@@ -408,11 +420,7 @@ var Surface = ({
     {
       style: [
         radiusStyle,
-        fullWidth && {
-          flexShrink: 1,
-          flexBasis: "auto",
-          width: "100%"
-        },
+        fullWidth && { flexShrink: 1, flexBasis: "auto", width: "100%" },
         {
           backgroundColor: background,
           padding
@@ -428,7 +436,8 @@ Surface.displayName = "Surface";
 // src/components/view/center/center.tsx
 
 
-var Center = ({ children, style }) => {
+var Center = ({ children, fullWidth, style }) => {
+  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -438,6 +447,7 @@ var Center = ({ children, style }) => {
           alignItems: "center",
           justifyContent: "center"
         },
+        fullWidthStyle,
         style
       ]
     },

package/dist/view/index.d.cts

@@ -38,7 +38,7 @@ type RowProps = {
      */
     style?: ViewStyle;
 };
-type ColumnProps = Omit<RowProps, 'fullWidth'>;
+type ColumnProps = RowProps;
 
 declare const Column: React.FC<ColumnProps>;
 
@@ -91,6 +91,11 @@ type PaddingProps = {
      * Left padding.
      */
     left?: number;
+    /**
+     * Whether the padding container should take the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Custom style for the padding container.
      */
@@ -132,6 +137,11 @@ type MarginProps = {
      * Left margin.
      */
     left?: number;
+    /**
+     * Whether the margin container should take the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Custom style for the margin container.
      */
@@ -148,11 +158,16 @@ type SizedBoxProps = {
     /**
      * Width of the box.
      */
-    width?: number;
+    width?: ViewStyle['width'];
     /**
      * Height of the box.
      */
-    height?: number;
+    height?: ViewStyle['height'];
+    /**
+     * Whether the box should take the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Custom style for the box.
      */
@@ -320,6 +335,11 @@ type CenterProps = {
      * Content to render inside the centered container.
      */
     children: ReactNode;
+    /**
+     * Whether the centered container should take the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Additional style for the container.
      */

package/dist/view/index.d.ts

@@ -38,7 +38,7 @@ type RowProps = {
      */
     style?: ViewStyle;
 };
-type ColumnProps = Omit<RowProps, 'fullWidth'>;
+type ColumnProps = RowProps;
 
 declare const Column: React.FC<ColumnProps>;
 
@@ -91,6 +91,11 @@ type PaddingProps = {
      * Left padding.
      */
     left?: number;
+    /**
+     * Whether the padding container should take the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Custom style for the padding container.
      */
@@ -132,6 +137,11 @@ type MarginProps = {
      * Left margin.
      */
     left?: number;
+    /**
+     * Whether the margin container should take the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Custom style for the margin container.
      */
@@ -148,11 +158,16 @@ type SizedBoxProps = {
     /**
      * Width of the box.
      */
-    width?: number;
+    width?: ViewStyle['width'];
     /**
      * Height of the box.
      */
-    height?: number;
+    height?: ViewStyle['height'];
+    /**
+     * Whether the box should take the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Custom style for the box.
      */
@@ -320,6 +335,11 @@ type CenterProps = {
      * Content to render inside the centered container.
      */
     children: ReactNode;
+    /**
+     * Whether the centered container should take the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Additional style for the container.
      */

package/dist/view/index.js

@@ -38,9 +38,11 @@ var Column = ({
   crossAxisAlignment,
   spacing,
   reverse = false,
+  fullWidth,
   style
 }) => {
   const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
+  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ React.createElement(
     View,
     {
@@ -51,6 +53,7 @@ var Column = ({
           justifyContent: resolveMainAxisAlignment(mainAxisAlignment),
           alignItems: resolveCrossAxisAlignment(crossAxisAlignment)
         },
+        fullWidthStyle,
         gapStyle,
         style
       ]
@@ -123,8 +126,10 @@ var Padding = ({
   right,
   bottom,
   left,
+  fullWidth,
   style
 }) => {
+  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ React4.createElement(
     View4,
     {
@@ -139,6 +144,7 @@ var Padding = ({
           paddingBottom: bottom,
           paddingLeft: left
         },
+        fullWidthStyle,
         style
       ]
     },
@@ -159,8 +165,10 @@ var Margin = ({
   right,
   bottom,
   left,
+  fullWidth,
   style
 }) => {
+  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ React5.createElement(
     View5,
     {
@@ -175,6 +183,7 @@ var Margin = ({
           marginBottom: bottom,
           marginLeft: left
         },
+        fullWidthStyle,
         style
       ]
     },
@@ -190,8 +199,10 @@ var SizedBox = ({
   children,
   width,
   height,
+  fullWidth,
   style
 }) => {
+  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ React6.createElement(
     View6,
     {
@@ -200,6 +211,7 @@ var SizedBox = ({
           width,
           height
         },
+        fullWidthStyle,
         style
       ]
     },
@@ -408,11 +420,7 @@ var Surface = ({
     {
       style: [
         radiusStyle,
-        fullWidth && {
-          flexShrink: 1,
-          flexBasis: "auto",
-          width: "100%"
-        },
+        fullWidth && { flexShrink: 1, flexBasis: "auto", width: "100%" },
         {
           backgroundColor: background,
           padding
@@ -428,7 +436,8 @@ Surface.displayName = "Surface";
 // src/components/view/center/center.tsx
 import React12 from "react";
 import { View as View12 } from "react-native";
-var Center = ({ children, style }) => {
+var Center = ({ children, fullWidth, style }) => {
+  const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
   return /* @__PURE__ */ React12.createElement(
     View12,
     {
@@ -438,6 +447,7 @@ var Center = ({ children, style }) => {
           alignItems: "center",
           justifyContent: "center"
         },
+        fullWidthStyle,
         style
       ]
     },

package/package.json

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