@xaui/native 0.0.21 → 0.0.23

package/dist/view/index.d.ts

@@ -1,603 +1,34 @@
-import React, { ReactNode, ReactElement, ComponentType } from 'react';
-import { ViewStyle, StyleProp, ColorValue, ScrollViewProps } from 'react-native';
-
-type MainAxisAlignment = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
-type CrossAxisAlignment = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-type RowProps = {
-    /**
-     * The content to render inside the row.
-     */
-    children: ReactNode;
-    /**
-     * Main axis alignment for row items.
-     * @default 'start'
-     */
-    mainAxisAlignment?: MainAxisAlignment;
-    /**
-     * Cross axis alignment for row items.
-     * @default 'center'
-     */
-    crossAxisAlignment?: CrossAxisAlignment;
-    /**
-     * Spacing between children.
-     */
-    spacing?: number;
-    /**
-     * Reverse the row direction.
-     * @default false
-     */
-    reverse?: boolean;
-    /**
-     * Force the container to take the full width.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Custom style for the row container.
-     */
-    style?: ViewStyle;
-};
-type ColumnProps = RowProps;
-
-declare const Column: React.FC<ColumnProps>;
-
-declare const Row: React.FC<RowProps>;
-
-type SpacerProps = {
-    /**
-     * Flex factor for the spacer.
-     * @default 1
-     */
-    flex?: number;
-    /**
-     * Custom style for the spacer.
-     */
-    style?: StyleProp<ViewStyle>;
-};
-
-declare const Spacer: React.FC<SpacerProps>;
-
-type PaddingProps = {
-    /**
-     * Content to render inside the padding container.
-     */
-    children: ReactNode;
-    /**
-     * Padding on all sides.
-     */
-    all?: number;
-    /**
-     * Horizontal padding.
-     */
-    horizontal?: number;
-    /**
-     * Vertical padding.
-     */
-    vertical?: number;
-    /**
-     * Top padding.
-     */
-    top?: number;
-    /**
-     * Right padding.
-     */
-    right?: number;
-    /**
-     * Bottom padding.
-     */
-    bottom?: number;
-    /**
-     * 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.
-     */
-    style?: StyleProp<ViewStyle>;
-};
-
-declare const Padding: React.FC<PaddingProps>;
-
-type MarginProps = {
-    /**
-     * Content to render inside the margin container.
-     */
-    children: ReactNode;
-    /**
-     * Margin on all sides.
-     */
-    all?: number;
-    /**
-     * Horizontal margin.
-     */
-    horizontal?: number;
-    /**
-     * Vertical margin.
-     */
-    vertical?: number;
-    /**
-     * Top margin.
-     */
-    top?: number;
-    /**
-     * Right margin.
-     */
-    right?: number;
-    /**
-     * Bottom margin.
-     */
-    bottom?: number;
-    /**
-     * 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.
-     */
-    style?: StyleProp<ViewStyle>;
-};
-
-declare const Margin: React.FC<MarginProps>;
-
-type SizedBoxProps = {
-    /**
-     * Content to render inside the box.
-     */
-    children?: ReactNode;
-    /**
-     * Width of the box.
-     */
-    width?: number;
-    /**
-     * Height of the box.
-     */
-    height?: number;
-    /**
-     * Custom style for the box.
-     */
-    style?: StyleProp<ViewStyle>;
-};
-
-declare const SizedBox: React.FC<SizedBoxProps>;
-
-type PositionedViewProps = {
-    /**
-     * Content to render inside the positioned container.
-     */
-    children: ReactNode;
-    /**
-     * Top offset.
-     */
-    top?: number;
-    /**
-     * Right offset.
-     */
-    right?: number;
-    /**
-     * Bottom offset.
-     */
-    bottom?: number;
-    /**
-     * Left offset.
-     */
-    left?: number;
-    /**
-     * Z-index for stacking context.
-     */
-    zIndex?: number;
-    /**
-     * Custom style for the positioned container.
-     */
-    style?: StyleProp<ViewStyle>;
-};
-
-declare const PositionedView: React.FC<PositionedViewProps>;
-
-type BlurViewProps = {
-    children: ReactNode;
-    unlockable?: boolean;
-    intensity?: number;
-    overlayColor?: ColorValue;
-    style?: StyleProp<ViewStyle>;
-};
-
-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.
-     */
-    children: ReactNode;
-    /**
-     * Number of columns in the grid.
-     * @default 2
-     */
-    columns?: number;
-    /**
-     * Spacing between rows and columns.
-     */
-    spacing?: number;
-    /**
-     * Spacing between rows.
-     */
-    rowSpacing?: number;
-    /**
-     * Spacing between columns.
-     */
-    columnSpacing?: number;
-    /**
-     * Custom style for the grid container.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Custom style for each grid item.
-     */
-    itemStyle?: StyleProp<ViewStyle>;
-};
-
-declare const Grid: React.FC<GridProps>;
-
-type GridItemProps = {
-    /**
-     * The content to render inside the grid item.
-     */
-    children: ReactNode;
-    /**
-     * Number of columns to span.
-     * @default 1
-     */
-    span?: number;
-    /**
-     * Custom style for the grid item.
-     */
-    style?: StyleProp<ViewStyle>;
-};
-
-declare const GridItem: React.FC<GridItemProps>;
-
-type GridBuilderRenderItem<T> = (info: {
-    item: T;
-    index: number;
-}) => ReactElement | null;
-type GridBuilderItemBuilder<T> = (info: {
-    item?: T;
-    index: number;
-}) => ReactElement | null;
-type GridBuilderProps<T> = {
-    /**
-     * Data to render in the grid.
-     */
-    data?: readonly T[];
-    /**
-     * Number of items to render (Flutter-style).
-     */
-    itemCount?: number;
-    /**
-     * Render function for each item.
-     */
-    renderItem?: GridBuilderRenderItem<T>;
-    /**
-     * Builder function for each item (Flutter-style).
-     */
-    itemBuilder?: GridBuilderItemBuilder<T>;
-    /**
-     * Extract a stable key for each item.
-     */
-    keyExtractor?: (item: T, index: number) => string;
-    /**
-     * Number of columns in the grid.
-     * @default 2
-     */
-    columns?: number;
-    /**
-     * Spacing between rows and columns.
-     */
-    spacing?: number;
-    /**
-     * Spacing between rows.
-     */
-    rowSpacing?: number;
-    /**
-     * Spacing between columns.
-     */
-    columnSpacing?: number;
-    /**
-     * Custom style for the grid container.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Custom style for each grid item container.
-     */
-    itemStyle?: StyleProp<ViewStyle>;
-    /**
-     * Enable or disable scrolling.
-     */
-    scrollEnabled?: boolean;
-    /**
-     * Called when the scroll reaches the end.
-     */
-    onEndReached?: () => void;
-    /**
-     * Distance from end (as a fraction of the viewport height).
-     * @default 0.1
-     */
-    onEndReachedThreshold?: number;
-    /**
-     * Content container style for the list.
-     */
-    contentContainerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Optional header element.
-     */
-    header?: ReactElement | ComponentType<any> | null;
-    /**
-     * Optional footer element.
-     */
-    footer?: ReactElement | ComponentType<any> | null;
-};
-
-declare const GridBuilder: {
-    <T>({ data, itemCount, renderItem, itemBuilder, keyExtractor, columns, spacing, rowSpacing, columnSpacing, style, itemStyle, scrollEnabled, onEndReached, onEndReachedThreshold, contentContainerStyle, header, footer, }: GridBuilderProps<T>): React.JSX.Element | null;
-    displayName: string;
-};
-
-type ConditionalViewAnimation = 'fade' | 'scale';
-type ConditionalViewProps = {
-    /**
-     * Whether the view is visible.
-     */
-    isVisible: boolean;
-    /**
-     * The content to render when visible.
-     */
-    children: ReactNode;
-    /**
-     * The animation to use when the view appears.
-     * @default 'fade'
-     */
-    animation?: ConditionalViewAnimation;
-    /**
-     * Disable animations entirely.
-     * @default false
-     */
-    disableAnimation?: boolean;
-};
-
-declare const ConditionalView: React.FC<ConditionalViewProps>;
-
-type MasonryGridProps = {
-    /**
-     * Items to render inside the masonry grid.
-     */
-    children: ReactNode;
-    /**
-     * Number of columns.
-     * @default 2
-     */
-    columns?: number;
-    /**
-     * Spacing between rows and columns.
-     */
-    spacing?: number;
-    /**
-     * Spacing between rows.
-     */
-    rowSpacing?: number;
-    /**
-     * Spacing between columns.
-     */
-    columnSpacing?: number;
-    /**
-     * Custom style for the grid container.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Custom style for each column container.
-     */
-    columnStyle?: StyleProp<ViewStyle>;
-};
-
-declare const MasonryGrid: React.FC<MasonryGridProps>;
-
-type MasonryGridItemProps = {
-    /**
-     * The content to render inside the masonry item.
-     */
-    children: ReactNode;
-    /**
-     * Custom style for the masonry item container.
-     */
-    style?: StyleProp<ViewStyle>;
-};
-
-declare const MasonryGridItem: React.FC<MasonryGridItemProps>;
-
-type MasonryGridBuilderRenderItem<T> = (info: {
-    item: T;
-    index: number;
-}) => ReactElement | null;
-type MasonryGridBuilderItemBuilder<T> = (info: {
-    item?: T;
-    index: number;
-}) => ReactElement | null;
-type MasonryGridBuilderProps<T> = {
-    /**
-     * Data to render in the masonry grid.
-     */
-    data?: readonly T[];
-    /**
-     * Number of items to render (Flutter-style).
-     */
-    itemCount?: number;
-    /**
-     * Render function for each item.
-     */
-    renderItem?: MasonryGridBuilderRenderItem<T>;
-    /**
-     * Builder function for each item (Flutter-style).
-     */
-    itemBuilder?: MasonryGridBuilderItemBuilder<T>;
-    /**
-     * Extract a stable key for each item.
-     */
-    keyExtractor?: (item: T, index: number) => string;
-    /**
-     * Number of columns.
-     * @default 2
-     */
-    columns?: number;
-    /**
-     * Spacing between rows and columns.
-     */
-    spacing?: number;
-    /**
-     * Spacing between rows.
-     */
-    rowSpacing?: number;
-    /**
-     * Spacing between columns.
-     */
-    columnSpacing?: number;
-    /**
-     * Custom style for the masonry container.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Custom style for each column container.
-     */
-    columnStyle?: StyleProp<ViewStyle>;
-    /**
-     * Called when the scroll reaches the end.
-     */
-    onEndReached?: () => void;
-    /**
-     * Distance from end (as a fraction of the viewport height).
-     * @default 0.1
-     */
-    onEndReachedThreshold?: number;
-    /**
-     * Optional header element.
-     */
-    header?: ReactNode;
-    /**
-     * Optional footer element.
-     */
-    footer?: ReactNode;
-    /**
-     * Content container style for the ScrollView.
-     */
-    contentContainerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Enable or disable scrolling.
-     */
-    scrollEnabled?: boolean;
-    /**
-     * Show the vertical scroll indicator.
-     */
-    showsVerticalScrollIndicator?: boolean;
-    /**
-     * Show the horizontal scroll indicator.
-     */
-    showsHorizontalScrollIndicator?: boolean;
-    /**
-     * Enable or disable bouncing.
-     */
-    bounces?: boolean;
-    /**
-     * Scroll handler called alongside internal infinite-scroll logic.
-     */
-    onScroll?: ScrollViewProps['onScroll'];
-};
-
-declare const MasonryGridBuilder: {
-    <T>({ data, itemCount, renderItem, itemBuilder, keyExtractor, columns, spacing, rowSpacing, columnSpacing, style, columnStyle, onEndReached, onEndReachedThreshold, header, footer, scrollEnabled, contentContainerStyle, showsVerticalScrollIndicator, showsHorizontalScrollIndicator, bounces, onScroll, }: MasonryGridBuilderProps<T>): React.JSX.Element | null;
-    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 };
+export { Column } from './column/column';
+export { Row } from './row/row';
+export { Spacer } from './spacer/spacer';
+export { Padding } from './padding/padding';
+export { Margin } from './margin/margin';
+export { SizedBox } from './sized-box/sized-box';
+export { PositionedView } from './positioned-view/positioned-view';
+export { BlurView } from './blur-view/blur-view';
+export { RoundedView } from './rounded-view/rounded-view';
+export { AspectRatio } from './aspect-ratio/aspect-ratio';
+export { Grid } from './grid/grid';
+export { GridItem } from './grid/grid-item';
+export { GridBuilder } from './grid/grid-builder';
+export { ConditionalView } from './conditional/conditional-view';
+export { MasonryGrid } from './masonry-grid/masonry-grid';
+export { MasonryGridItem } from './masonry-grid/masonry-grid-item';
+export { MasonryGridBuilder } from './masonry-grid/masonry-grid-builder';
+export type { ColumnProps, RowProps, MainAxisAlignment, CrossAxisAlignment, } from './layout-types';
+export type { SpacerProps } from './spacer/spacer.type';
+export type { PaddingProps } from './padding/padding.type';
+export type { MarginProps } from './margin/margin.type';
+export type { SizedBoxProps } from './sized-box/sized-box.type';
+export type { PositionedViewProps } from './positioned-view/positioned-view.type';
+export type { BlurViewProps } from './blur-view/blur-view.type';
+export type { RoundedViewProps } from './rounded-view/rounded-view.type';
+export type { AspectRatioProps } from './aspect-ratio/aspect-ratio.type';
+export type { ConditionalViewAnimation, ConditionalViewProps, } from './conditional/conditional-view.type';
+export type { GridProps } from './grid/grid.type';
+export type { GridItemProps } from './grid/grid-item.type';
+export type { GridBuilderProps } from './grid/grid-builder.type';
+export type { MasonryGridProps } from './masonry-grid/masonry-grid.type';
+export type { MasonryGridItemProps } from './masonry-grid/masonry-grid-item.type';
+export type { MasonryGridBuilderProps } from './masonry-grid/masonry-grid-builder.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/view/index.js

@@ -300,7 +300,17 @@ 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;
+  const {
+    all = 0,
+    top,
+    bottom,
+    left,
+    right,
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = props;
   return useMemo(() => {
     return {
       borderTopLeftRadius: topLeft ?? top ?? left ?? all,
@@ -360,7 +370,11 @@ var styles2 = StyleSheet2.create({
 // src/components/view/aspect-ratio/aspect-ratio.tsx
 import React10 from "react";
 import { View as View10 } from "react-native";
-var AspectRatio = ({ children, ratio, style }) => {
+var AspectRatio = ({
+  children,
+  ratio,
+  style
+}) => {
   return /* @__PURE__ */ React10.createElement(View10, { style: [{ aspectRatio: ratio }, style] }, children);
 };