@xaui/native 0.0.15 → 0.0.17

package/dist/view/index.d.ts

@@ -213,6 +213,82 @@ type BlurViewProps = {
 
 declare const BlurView: React.FC<BlurViewProps>;
 
+type RoundedViewProps = {
+    /**
+     * Content to be displayed inside the rounded view
+     */
+    children: ReactNode;
+    /**
+     * Border radius for all corners in pixels
+     */
+    all?: number;
+    /**
+     * Border radius for top corners (topLeft and topRight) in pixels
+     */
+    top?: number;
+    /**
+     * Border radius for bottom corners (bottomLeft and bottomRight) in pixels
+     */
+    bottom?: number;
+    /**
+     * Border radius for left corners (topLeft and bottomLeft) in pixels
+     */
+    left?: number;
+    /**
+     * Border radius for right corners (topRight and bottomRight) in pixels
+     */
+    right?: number;
+    /**
+     * Border radius for top-left corner in pixels
+     */
+    topLeft?: number;
+    /**
+     * Border radius for top-right corner in pixels
+     */
+    topRight?: number;
+    /**
+     * Border radius for bottom-left corner in pixels
+     */
+    bottomLeft?: number;
+    /**
+     * Border radius for bottom-right corner in pixels
+     */
+    bottomRight?: number;
+    /**
+     * Whether the view should take full width
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Background color of the view
+     */
+    backgroundColor?: string;
+    /**
+     * Custom style for the view
+     */
+    style?: ViewStyle;
+};
+
+declare const RoundedView: React.FC<RoundedViewProps>;
+
+type AspectRatioProps = {
+    /**
+     * Content to be displayed inside the aspect ratio container
+     */
+    children: ReactNode;
+    /**
+     * Aspect ratio as a number (width / height)
+     * Examples: 16/9, 4/3, 1, 2/1
+     */
+    ratio: number;
+    /**
+     * Custom style for the container
+     */
+    style?: ViewStyle;
+};
+
+declare const AspectRatio: React.FC<AspectRatioProps>;
+
 type GridProps = {
     /**
      * The grid items to render.
@@ -524,4 +600,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { 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, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps };
+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 };

package/dist/view/index.js

@@ -293,17 +293,88 @@ var BlurView = ({
 };
 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";
+
+// src/components/view/rounded-view/rounded-view.hook.ts
+import { useMemo } from "react";
+var useRoundedViewStyle = (props) => {
+  const { all = 0, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight } = props;
+  return 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__ */ React9.createElement(
+    View9,
+    {
+      style: [
+        borderRadiusStyle,
+        fullWidth && styles2.fullWidth,
+        backgroundColor && { backgroundColor },
+        style
+      ]
+    },
+    children
+  );
+};
+var styles2 = StyleSheet2.create({
+  fullWidth: {
+    width: "100%"
+  }
+});
+
+// src/components/view/aspect-ratio/aspect-ratio.tsx
+import React10 from "react";
+import { View as View10 } from "react-native";
+var AspectRatio = ({ children, ratio, style }) => {
+  return /* @__PURE__ */ React10.createElement(View10, { style: [{ aspectRatio: ratio }, style] }, children);
+};
+
 // src/components/view/grid/grid.tsx
-import React10, { useMemo, useState } from "react";
+import React12, { useMemo as useMemo2, useState } from "react";
 import {
-  View as View10
+  View as View12
 } from "react-native";
 
 // src/components/view/grid/grid-item.tsx
-import React9 from "react";
-import { View as View9 } from "react-native";
+import React11 from "react";
+import { View as View11 } from "react-native";
 var GridItem = ({ children, style }) => {
-  return /* @__PURE__ */ React9.createElement(View9, { style }, children);
+  return /* @__PURE__ */ React11.createElement(View11, { style }, children);
 };
 GridItem.displayName = "GridItem";
 
@@ -317,7 +388,7 @@ var getSafeSpan = (span, columns) => {
   return Math.min(Math.floor(span), columns);
 };
 var isGridItemElement = (child) => {
-  if (!React10.isValidElement(child)) return false;
+  if (!React12.isValidElement(child)) return false;
   if (child.type === GridItem) return true;
   const displayName = child.type.displayName;
   return displayName === "GridItem";
@@ -336,15 +407,15 @@ var Grid = ({
   const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
   const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
   const itemWidth = `${100 / safeColumns}%`;
-  const items = React10.Children.toArray(children);
+  const items = React12.Children.toArray(children);
   const totalColumnGap = resolvedColumnSpacing * (safeColumns - 1);
-  const baseItemWidth = useMemo(() => {
+  const baseItemWidth = useMemo2(() => {
     if (!containerWidth) return void 0;
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
   let currentColumn = 0;
-  return /* @__PURE__ */ React10.createElement(
-    View10,
+  return /* @__PURE__ */ React12.createElement(
+    View12,
     {
       style: [
         {
@@ -361,7 +432,7 @@ var Grid = ({
       }
     },
     items.map((child, index) => {
-      const key = React10.isValidElement(child) && child.key ? child.key : `grid-${index}`;
+      const key = React12.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) {
@@ -381,7 +452,7 @@ var Grid = ({
           itemStyle,
           child.props.style
         ];
-        const element2 = React10.cloneElement(child, {
+        const element2 = React12.cloneElement(child, {
           key,
           style: mergedStyle
         });
@@ -389,8 +460,8 @@ var Grid = ({
         return element2;
       }
       const defaultItemWidth = baseItemWidth === void 0 ? itemWidth : baseItemWidth;
-      const element = /* @__PURE__ */ React10.createElement(
-        View10,
+      const element = /* @__PURE__ */ React12.createElement(
+        View12,
         {
           key,
           style: [
@@ -413,11 +484,11 @@ var Grid = ({
 };
 
 // src/components/view/grid/grid-builder.tsx
-import React11, { useMemo as useMemo2 } from "react";
+import React13, { useMemo as useMemo3 } from "react";
 import {
   FlatList,
-  StyleSheet as StyleSheet2,
-  View as View11
+  StyleSheet as StyleSheet3,
+  View as View13
 } from "react-native";
 var getSafeColumns2 = (columns) => {
   if (!columns || columns <= 0) return 1;
@@ -450,11 +521,11 @@ var GridBuilder = ({
   const safeColumns = getSafeColumns2(columns);
   const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
   const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
-  const resolvedData = useMemo2(
+  const resolvedData = useMemo3(
     () => resolveGridData(data, itemCount),
     [data, itemCount]
   );
-  const paddedData = useMemo2(() => {
+  const paddedData = useMemo3(() => {
     const remainder = resolvedData.length % safeColumns;
     const placeholders = remainder === 0 ? 0 : safeColumns - remainder;
     if (placeholders === 0)
@@ -475,12 +546,12 @@ var GridBuilder = ({
       }))
     ];
   }, [resolvedData, safeColumns]);
-  const resolvedKeyExtractor = useMemo2(() => {
+  const resolvedKeyExtractor = useMemo3(() => {
     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 = useMemo2(() => {
+  const resolvedRenderer = useMemo3(() => {
     if (renderItem) return renderItem;
     if (itemBuilder)
       return ({ item, index }) => itemBuilder({ item, index });
@@ -504,7 +575,7 @@ var GridBuilder = ({
         },
         itemStyle
       ];
-      return /* @__PURE__ */ React11.createElement(View11, { style: placeholderStyle, pointerEvents: "none" });
+      return /* @__PURE__ */ React13.createElement(View13, { style: placeholderStyle, pointerEvents: "none" });
     }
     const element = resolvedRenderer({ item: item.item, index: item.index });
     if (element === null) return null;
@@ -520,9 +591,9 @@ var GridBuilder = ({
       },
       itemStyle
     ];
-    return /* @__PURE__ */ React11.createElement(View11, { style: wrapperStyle }, element);
+    return /* @__PURE__ */ React13.createElement(View13, { style: wrapperStyle }, element);
   };
-  const flattenedStyle = StyleSheet2.flatten(style) ?? {};
+  const flattenedStyle = StyleSheet3.flatten(style) ?? {};
   const {
     alignItems,
     justifyContent,
@@ -541,7 +612,7 @@ var GridBuilder = ({
     ...columnGap !== void 0 ? { columnGap } : {}
   };
   const hasLayoutStyle = Object.keys(layoutStyle).length > 0;
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(
     FlatList,
     {
       data: paddedData,
@@ -561,7 +632,7 @@ var GridBuilder = ({
 GridBuilder.displayName = "GridBuilder";
 
 // src/components/view/conditional/conditional-view.tsx
-import React12, { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
+import React14, { 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
@@ -644,8 +715,8 @@ var ConditionalView = ({
 }) => {
   const [shouldRender, setShouldRender] = useState2(isVisible);
   const animationRef = useRef2(null);
-  const initialValues = useMemo3(() => getInitialValues(animation), [animation]);
-  const exitValues = useMemo3(() => getExitValues(animation), [animation]);
+  const initialValues = useMemo4(() => getInitialValues(animation), [animation]);
+  const exitValues = useMemo4(() => getExitValues(animation), [animation]);
   const opacity = useRef2(
     new Animated3.Value(
       disableAnimation ? FINAL_VALUES.opacity : initialValues.opacity
@@ -703,7 +774,7 @@ var ConditionalView = ({
     translateX,
     translateY
   ]);
-  const animatedStyle = useMemo3(
+  const animatedStyle = useMemo4(
     () => ({
       opacity,
       transform: [{ translateX }, { translateY }, { scale }]
@@ -713,18 +784,18 @@ var ConditionalView = ({
   if (!shouldRender) {
     return null;
   }
-  return /* @__PURE__ */ React12.createElement(Animated3.View, { style: animatedStyle }, children);
+  return /* @__PURE__ */ React14.createElement(Animated3.View, { style: animatedStyle }, children);
 };
 
 // src/components/view/masonry-grid/masonry-grid.tsx
-import React13, { useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
-import { View as View12 } from "react-native";
+import React15, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
+import { View as View14 } from "react-native";
 var getSafeColumns3 = (columns) => {
   if (!columns || columns <= 0) return 1;
   return Math.floor(columns);
 };
 var getItemKey = (child, index) => {
-  return React13.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
+  return React15.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
 };
 var MasonryGrid = ({
   children,
@@ -742,18 +813,18 @@ var MasonryGrid = ({
   const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
   const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
   const totalColumnGap = resolvedColumnSpacing * (safeColumns - 1);
-  const columnWidth = useMemo4(() => {
+  const columnWidth = useMemo5(() => {
     if (!containerWidth) return void 0;
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
-  const items = useMemo4(
-    () => React13.Children.toArray(children).map((child, index) => ({
+  const items = useMemo5(
+    () => React15.Children.toArray(children).map((child, index) => ({
       key: getItemKey(child, index),
       element: child
     })),
     [children]
   );
-  const columnsItems = useMemo4(() => {
+  const columnsItems = useMemo5(() => {
     const buckets = Array.from({ length: safeColumns }, () => []);
     const heights = new Array(safeColumns).fill(0);
     items.forEach((item) => {
@@ -764,8 +835,8 @@ var MasonryGrid = ({
     });
     return buckets;
   }, [items, layoutVersion, resolvedRowSpacing, safeColumns]);
-  return /* @__PURE__ */ React13.createElement(
-    View12,
+  return /* @__PURE__ */ React15.createElement(
+    View14,
     {
       style: [
         {
@@ -788,10 +859,10 @@ var MasonryGrid = ({
         },
         columnStyle
       ];
-      return /* @__PURE__ */ React13.createElement(View12, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
+      return /* @__PURE__ */ React15.createElement(View14, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
         const isLastRow = index === column.length - 1;
-        return /* @__PURE__ */ React13.createElement(
-          View12,
+        return /* @__PURE__ */ React15.createElement(
+          View14,
           {
             key: item.key,
             style: { marginBottom: isLastRow ? 0 : resolvedRowSpacing },
@@ -810,18 +881,18 @@ var MasonryGrid = ({
 };
 
 // src/components/view/masonry-grid/masonry-grid-item.tsx
-import React14 from "react";
-import { View as View13 } from "react-native";
+import React16 from "react";
+import { View as View15 } from "react-native";
 var MasonryGridItem = ({
   children,
   style
 }) => {
-  return /* @__PURE__ */ React14.createElement(View13, { style }, children);
+  return /* @__PURE__ */ React16.createElement(View15, { style }, children);
 };
 MasonryGridItem.displayName = "MasonryGridItem";
 
 // src/components/view/masonry-grid/masonry-grid-builder.tsx
-import React15, { useMemo as useMemo5, useRef as useRef4 } from "react";
+import React17, { useMemo as useMemo6, useRef as useRef4 } from "react";
 import {
   ScrollView
 } from "react-native";
@@ -853,15 +924,15 @@ var MasonryGridBuilder = ({
   bounces,
   onScroll
 }) => {
-  const resolvedData = useMemo5(
+  const resolvedData = useMemo6(
     () => resolveMasonryData(data, itemCount),
     [data, itemCount]
   );
-  const resolvedKeyExtractor = useMemo5(() => {
+  const resolvedKeyExtractor = useMemo6(() => {
     if (keyExtractor) return keyExtractor;
     return (_, index) => `masonry-${index}`;
   }, [keyExtractor]);
-  const resolvedRenderer = useMemo5(() => {
+  const resolvedRenderer = useMemo6(() => {
     if (renderItem) return renderItem;
     if (itemBuilder)
       return ({ item, index }) => itemBuilder({ item, index });
@@ -881,7 +952,7 @@ var MasonryGridBuilder = ({
       onEndReached();
     }
   };
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React17.createElement(
     ScrollView,
     {
       scrollEventThrottle: 16,
@@ -893,7 +964,7 @@ var MasonryGridBuilder = ({
       onScroll: handleScroll
     },
     header,
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React17.createElement(
       MasonryGrid,
       {
         columns,
@@ -903,13 +974,14 @@ var MasonryGridBuilder = ({
         style: [{ width: "100%" }, style],
         columnStyle
       },
-      resolvedData.map((item, index) => /* @__PURE__ */ React15.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
+      resolvedData.map((item, index) => /* @__PURE__ */ React17.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
     ),
     footer
   );
 };
 MasonryGridBuilder.displayName = "MasonryGridBuilder";
 export {
+  AspectRatio,
   BlurView,
   Column,
   ConditionalView,
@@ -922,6 +994,7 @@ export {
   MasonryGridItem,
   Padding,
   PositionedView,
+  RoundedView,
   Row,
   SizedBox,
   Spacer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
@@ -102,6 +102,16 @@
       "import": "./dist/view/index.js",
       "require": "./dist/view/index.js"
     },
+    "./carousel": {
+      "types": "./dist/carousel/index.d.ts",
+      "import": "./dist/carousel/index.js",
+      "require": "./dist/carousel/index.js"
+    },
+    "./segment-button": {
+      "types": "./dist/segment-button/index.d.ts",
+      "import": "./dist/segment-button/index.js",
+      "require": "./dist/segment-button/index.js"
+    },
     "./chip": {
       "types": "./dist/chip/index.d.ts",
       "import": "./dist/chip/index.js",
@@ -116,6 +126,16 @@
       "types": "./dist/menu/index.d.ts",
       "import": "./dist/menu/index.js",
       "require": "./dist/menu/index.js"
+    },
+    "./fab": {
+      "types": "./dist/fab/index.d.ts",
+      "import": "./dist/fab/index.js",
+      "require": "./dist/fab/index.js"
+    },
+    "./fab-menu": {
+      "types": "./dist/fab-menu/index.d.ts",
+      "import": "./dist/fab-menu/index.js",
+      "require": "./dist/fab-menu/index.js"
     }
   },
   "files": [