@xaui/native 0.2.5 → 0.2.7

package/dist/view/index.d.ts

@@ -1,55 +1,163 @@
 import React, { ReactNode, ReactElement, ComponentType } from 'react';
-import { StyleProp, ViewStyle, ColorValue, ScrollViewProps } from 'react-native';
+import { AccessibilityRole, AccessibilityState, StyleProp, ViewStyle, ColorValue, ScrollViewProps } from 'react-native';
+import { EdgeInsets, Alignment, Border, BorderRadius, ShadowConfig, TransformConfig } from '@xaui/core';
 import { ThemeColor, Radius } from '@xaui/core/types';
 
-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'
-     */
+type ContainerProps = {
+    /** Content to render inside the container. */
+    children?: ReactNode;
+    /** Width in logical pixels or percentage string (e.g. `'50%'`). */
+    width?: number | `${number}%`;
+    /** Height in logical pixels or percentage string (e.g. `'50%'`). */
+    height?: number | `${number}%`;
+    /** Minimum width constraint in logical pixels. */
+    minWidth?: number;
+    /** Maximum width constraint in logical pixels. */
+    maxWidth?: number;
+    /** Minimum height constraint in logical pixels. */
+    minHeight?: number;
+    /** Maximum height constraint in logical pixels. */
+    maxHeight?: number;
+    /** Width-to-height aspect ratio (e.g. `16 / 9`). */
+    aspectRatio?: number;
+    /** Flex grow/shrink factor. */
+    flex?: number;
+    /** Inner spacing — number for all sides or `{ top, bottom, left, right, horizontal, vertical }`. */
+    padding?: EdgeInsets;
+    /** Outer spacing — same shape as `padding`. */
+    margin?: EdgeInsets;
+    /** Alignment of children — named (`'center'`, `'topLeft'`, …) or coordinate `{ x, y }`. */
+    alignment?: Alignment;
+    /** Background color. */
+    color?: string;
+    /** Border — uniform `{ width, color, style }` or per-side `{ top, left, … }`. */
+    border?: Border;
+    /** Corner radius — number for all corners or `{ topLeft, topRight, bottomLeft, bottomRight }`. */
+    borderRadius?: BorderRadius;
+    /** Drop shadow config — `{ color, offset: { x, y }, blur, opacity, elevation }`. */
+    shadow?: ShadowConfig;
+    /** Clip children to the container bounds (`overflow: hidden`). */
+    clip?: boolean;
+    /** CSS / RN transforms — `{ rotate, scale, translateX, translateY, … }`. */
+    transform?: TransformConfig;
+    /** Opacity from `0` (transparent) to `1` (opaque). */
+    opacity?: number;
+    /** Tap handler — renders the container as `Pressable` when provided. */
+    onPress?: () => void;
+    /** Long-press handler (fires after 500 ms). */
+    onLongPress?: () => void;
+    /** Fired on touch/pointer down. */
+    onPressIn?: () => void;
+    /** Fired on touch/pointer up. */
+    onPressOut?: () => void;
+    /** Disables all press handlers when `true`. */
+    disabled?: boolean;
+    /** Screen reader label. */
+    accessibilityLabel?: string;
+    /** Accessibility role for assistive technologies. */
+    accessibilityRole?: AccessibilityRole;
+    /** Accessibility state (disabled, selected, …). */
+    accessibilityState?: AccessibilityState;
+    /** Whether the element is accessible to assistive technologies. */
+    accessible?: boolean;
+    /** Test identifier for e2e tests. */
+    testID?: string;
+    /** Raw style override applied to the underlying View / Pressable. */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Container: React.FC<ContainerProps>;
+
+type MainAxisAlignment = 'start' | 'end' | 'center' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly';
+type CrossAxisAlignment = 'start' | 'end' | 'center' | 'stretch';
+/** Controls how much space the flex widget occupies in its main axis. */
+type MainAxisSize = 'min' | 'max';
+type Direction = 'horizontal' | 'vertical';
+type FlexProps = {
+    /** Content to render inside the flex container. */
+    children?: ReactNode;
+    /** Axis direction — `'horizontal'` for row, `'vertical'` for column. */
+    direction: Direction;
+    /** How to place children along the main axis. @default 'start' */
     mainAxisAlignment?: MainAxisAlignment;
-    /**
-     * Cross axis alignment for row items.
-     * @default 'center'
-     */
+    /** How to place children along the cross axis. @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.
-     */
+    /** Whether the flex takes max or min space in the main axis. @default 'max' */
+    mainAxisSize?: MainAxisSize;
+    /** Wrap children onto multiple lines when they overflow. @default false */
+    wrap?: boolean;
+    /** Gap in logical pixels between children. */
+    gap?: number;
+    /** Reverse the layout direction. @default false */
+    reversed?: boolean;
+    /** Flex factor applied to the container itself. */
+    flex?: number;
+    /** Raw style override applied to the underlying View. */
     style?: StyleProp<ViewStyle>;
+    /** Test identifier for e2e tests. */
+    testID?: string;
 };
-type ColumnProps = RowProps & {
+type RowProps = Omit<FlexProps, 'direction'>;
+type ColumnProps = Omit<FlexProps, 'direction'>;
+/** Controls how a `Flexible` child sizes itself within available space. */
+type FlexFit = 'tight' | 'loose';
+type FlexibleProps = {
+    /** Content to render inside the flexible container. */
+    children?: ReactNode;
+    /** Flex factor — how much space to claim relative to siblings. @default 1 */
+    flex?: number;
     /**
-     * If true, the container will grow to fill available space.
-     * @default false
+     * Sizing behaviour:
+     * - `'tight'` — force the child to fill all allotted space (like `Expanded`).
+     * - `'loose'` — allow the child to be at most the allotted size but no larger.
+     * @default 'loose'
      */
-    noGrowth?: boolean;
+    fit?: FlexFit;
+    /** Raw style override applied to the underlying View. */
+    style?: StyleProp<ViewStyle>;
+    /** Test identifier for e2e tests. */
+    testID?: string;
 };
+type WrapProps = {
+    /** Content to render inside the wrap container. */
+    children?: ReactNode;
+    /** Primary axis direction. @default 'horizontal' */
+    direction?: Direction;
+    /** Alignment of children along the main axis within each run. @default 'start' */
+    alignment?: MainAxisAlignment;
+    /** Alignment of runs along the cross axis. @default 'start' */
+    runAlignment?: MainAxisAlignment;
+    /** Space between children along the main axis. @default 0 */
+    spacing?: number;
+    /** Space between runs along the cross axis. @default 0 */
+    runSpacing?: number;
+    /** Raw style override applied to the underlying View. */
+    style?: StyleProp<ViewStyle>;
+    /** Test identifier for e2e tests. */
+    testID?: string;
+};
+
+declare const Flex: React.FC<FlexProps>;
 
 declare const Column: React.FC<ColumnProps>;
 
 declare const Row: React.FC<RowProps>;
 
+type ExpandedProps = {
+    /** Content to render inside the expanded container. */
+    children?: ReactNode;
+    /** Flex factor — how much of the available space to take relative to siblings. @default 1 */
+    flex?: number;
+    /** Raw style override applied to the underlying View. */
+    style?: StyleProp<ViewStyle>;
+    /** Test identifier for e2e tests. */
+    testID?: string;
+};
+
+declare const Expanded: React.FC<ExpandedProps>;
+
+declare const Flexible: React.FC<FlexibleProps>;
+
 type SpacerProps = {
     /**
      * Flex factor for the spacer.
@@ -64,133 +172,133 @@ type SpacerProps = {
 
 declare const Spacer: React.FC<SpacerProps>;
 
+declare const Wrap: React.FC<WrapProps>;
+
 type PaddingProps = {
+    /** Content to render inside the padding container. */
+    children?: ReactNode;
+    /** Padding applied to all sides — number for uniform, or `{ top, bottom, left, right, horizontal, vertical }`. */
+    padding: EdgeInsets;
+    /** Raw style override applied to the underlying View. */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Padding: React.FC<PaddingProps>;
+
+type MarginProps = {
+    /** Content to render inside the margin container. */
+    children?: ReactNode;
+    /** Margin applied to all sides — number for uniform, or `{ top, bottom, left, right, horizontal, vertical }`. */
+    margin: EdgeInsets;
+    /** Raw style override applied to the underlying View. */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Margin: React.FC<MarginProps>;
+
+type SizedBoxProps = {
     /**
-     * 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.
+     * Width in logical pixels.
      */
-    right?: number;
+    width?: number;
     /**
-     * Bottom padding.
+     * Height in logical pixels.
      */
-    bottom?: number;
+    height?: number;
     /**
-     * Left padding.
+     * Fills all available space — equivalent to Flutter's Expanded (flex: 1, alignSelf: 'stretch').
+     * @default false
      */
-    left?: number;
+    expand?: boolean;
     /**
-     * Whether the padding container should take the full width of its parent.
+     * Collapses to zero size — equivalent to Flutter's SizedBox.shrink().
      * @default false
      */
-    fullWidth?: boolean;
+    shrink?: boolean;
     /**
-     * If true, the padding container will grow to fill available space.
-     * @default false
+     * Content to render inside the box.
      */
-    noGrowth?: boolean;
+    children?: ReactNode;
     /**
-     * Custom style for the padding container.
+     * Style override applied to the underlying View.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Test identifier for e2e tests.
+     */
+    testID?: string;
 };
 
-declare const Padding: React.FC<PaddingProps>;
+declare const SizedBox: React.FC<SizedBoxProps>;
 
-type MarginProps = {
+type BoxConstraints = {
     /**
-     * Content to render inside the margin container.
+     * Minimum width in logical pixels.
      */
-    children: ReactNode;
+    minWidth?: number;
     /**
-     * Margin on all sides.
+     * Maximum width in logical pixels.
      */
-    all?: number;
+    maxWidth?: number;
     /**
-     * Horizontal margin.
+     * Minimum height in logical pixels.
      */
-    horizontal?: number;
-    /**
-     * Vertical margin.
-     */
-    vertical?: number;
-    /**
-     * Top margin.
-     */
-    top?: number;
+    minHeight?: number;
     /**
-     * Right margin.
+     * Maximum height in logical pixels.
      */
-    right?: number;
+    maxHeight?: number;
+};
+type ConstrainedBoxProps = {
     /**
-     * Bottom margin.
+     * Size constraints to impose on the child — Flutter BoxConstraints equivalent.
      */
-    bottom?: number;
+    constraints: BoxConstraints;
     /**
-     * Left margin.
-     */
-    left?: number;
-    /**
-     * Whether the margin container should take the full width of its parent.
-     * @default false
+     * Content to render inside the box.
      */
-    fullWidth?: boolean;
+    children?: ReactNode;
     /**
-     * If true, the margin container will grow to fill available space.
-     * @default false
+     * Style override applied to the underlying View.
      */
-    noGrowth?: boolean;
+    style?: StyleProp<ViewStyle>;
     /**
-     * Custom style for the margin container.
+     * Test identifier for e2e tests.
      */
-    style?: StyleProp<ViewStyle>;
+    testID?: string;
 };
 
-declare const Margin: React.FC<MarginProps>;
+declare const ConstrainedBox: React.FC<ConstrainedBoxProps>;
 
-type SizedBoxProps = {
+type FractionallySizedBoxProps = {
     /**
-     * Content to render inside the box.
+     * Fraction of the parent's width (0–1). When undefined, the child chooses its own width.
      */
-    children?: ReactNode;
+    widthFactor?: number;
     /**
-     * Width of the box.
+     * Fraction of the parent's height (0–1). When undefined, the child chooses its own height.
      */
-    width?: ViewStyle['width'];
+    heightFactor?: number;
     /**
-     * Height of the box.
+     * How to align the child within the remaining space.
+     * @default 'topLeft'
      */
-    height?: ViewStyle['height'];
+    alignment?: Alignment;
     /**
-     * Whether the box should take the full width of its parent.
-     * @default false
+     * Content to render inside the box.
      */
-    fullWidth?: boolean;
+    children?: ReactNode;
     /**
-     * Custom style for the box.
+     * Style override applied to the underlying View.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Test identifier for e2e tests.
+     */
+    testID?: string;
 };
 
-declare const SizedBox: React.FC<SizedBoxProps>;
+declare const FractionallySizedBox: React.FC<FractionallySizedBoxProps>;
 
 type PositionedViewProps = {
     /**
@@ -300,18 +408,31 @@ declare const RoundedView: React.FC<RoundedViewProps>;
 
 type AspectRatioProps = {
     /**
-     * Content to be displayed inside the aspect ratio container
+     * Content to be displayed inside the aspect ratio container.
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
-     * Aspect ratio as a number (width / height)
+     * Aspect ratio as a number (width / height).
      * Examples: 16/9, 4/3, 1, 2/1
      */
     ratio: number;
     /**
-     * Custom style for the container
+     * How to align the child within the container.
      */
-    style?: ViewStyle;
+    alignment?: Alignment;
+    /**
+     * Whether to clip content that overflows the container.
+     * @default false
+     */
+    clip?: boolean;
+    /**
+     * Style override applied to the underlying View.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Test identifier for e2e tests.
+     */
+    testID?: string;
 };
 
 declare const AspectRatio: React.FC<AspectRatioProps>;
@@ -378,24 +499,21 @@ type ScreenProps = {
 
 declare const Screen: React.FC<ScreenProps>;
 
+type AlignProps = {
+    /** Content to align inside the container. */
+    children?: ReactNode;
+    /** Alignment of children — named (`'center'`, `'topLeft'`, …) or coordinate `{ x, y }`. */
+    alignment: Alignment;
+    /** Raw style override applied to the underlying View. */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Align: React.FC<AlignProps>;
+
 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;
-    /**
-     * If true, disables automatic growth (e.g. prevents using flex: 1 to fill available space).
-     * @default false
-     */
-    noGrowth?: boolean;
-    /**
-     * Additional style for the container.
-     */
+    /** Content to center. */
+    children?: ReactNode;
+    /** Raw style override applied to the underlying View. */
     style?: StyleProp<ViewStyle>;
 };
 
@@ -712,4 +830,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-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, Screen, type ScreenProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };
+export { Align, type AlignProps, AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, type BoxConstraints, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, ConstrainedBox, type ConstrainedBoxProps, Container, type ContainerProps, type CrossAxisAlignment, type Direction, Expanded, type ExpandedProps, Flex, type FlexFit, type FlexProps, Flexible, type FlexibleProps, FractionallySizedBox, type FractionallySizedBoxProps, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, type MainAxisSize, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, Screen, type ScreenProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor, Wrap, type WrapProps };