@xaui/native 0.2.5 → 0.2.6

package/dist/view/index.d.cts

@@ -1,7 +1,73 @@
 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 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' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 type CrossAxisAlignment = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 type RowProps = {
@@ -65,132 +131,130 @@ type SpacerProps = {
 declare const Spacer: React.FC<SpacerProps>;
 
 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;
+    minHeight?: number;
     /**
-     * Vertical margin.
+     * Maximum height in logical pixels.
      */
-    vertical?: number;
-    /**
-     * Top margin.
-     */
-    top?: number;
-    /**
-     * Right margin.
-     */
-    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 +364,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 +455,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 +786,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, FractionallySizedBox, type FractionallySizedBoxProps, 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 };