@dynshift/layr 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,1222 @@
+import React, { ReactNode, CSSProperties } from 'react';
+
+declare enum BoxShape {
+    rectangle = "rectangle",
+    circle = "circle"
+}
+/**
+ * EdgeInsets for padding and margin (Flutter pattern)
+ */
+type EdgeInsets = {
+    all: number;
+} | {
+    horizontal?: number;
+    vertical?: number;
+} | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+/**
+ * BoxShadow - Single shadow definition
+ */
+interface BoxShadow {
+    color?: string;
+    offset?: {
+        dx: number;
+        dy: number;
+    };
+    blurRadius?: number;
+    spreadRadius?: number;
+}
+/**
+ * DecorationImage - Background image configuration
+ */
+interface DecorationImage {
+    image: string;
+    fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    alignment?: string;
+    repeat?: "repeat" | "no-repeat" | "repeat-x" | "repeat-y";
+    opacity?: number;
+}
+/**
+ * Gradient - Linear or Radial gradient
+ */
+interface Gradient {
+    type?: "linear" | "radial";
+    colors: string[];
+    stops?: number[];
+    begin?: string;
+    end?: string;
+    center?: string;
+}
+/**
+ * BoxBorder - Border configuration
+ */
+interface BoxBorder {
+    top?: {
+        width: number;
+        color: string;
+        style?: "solid" | "dashed" | "dotted";
+    };
+    bottom?: {
+        width: number;
+        color: string;
+        style?: "solid" | "dashed" | "dotted";
+    };
+    left?: {
+        width: number;
+        color: string;
+        style?: "solid" | "dashed" | "dotted";
+    };
+    right?: {
+        width: number;
+        color: string;
+        style?: "solid" | "dashed" | "dotted";
+    };
+}
+/**
+ * BoxDecoration - Complete decoration specification (Flutter pattern)
+ */
+interface BoxDecoration {
+    color?: string;
+    image?: DecorationImage;
+    gradient?: Gradient;
+    border?: BoxBorder | string;
+    borderRadius?: number | string;
+    shape?: BoxShape;
+    boxShadow?: BoxShadow[];
+    backgroundBlendMode?: string;
+    opacity?: number;
+}
+/**
+ * Box constraints (Flutter pattern)
+ */
+interface BoxConstraints {
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+}
+/**
+ * Alignment options (Flutter pattern)
+ */
+type Alignment = "topLeft" | "topCenter" | "topRight" | "centerLeft" | "center" | "centerRight" | "bottomLeft" | "bottomCenter" | "bottomRight";
+/**
+ * Container Props - Mirrors Flutter Container API
+ */
+interface ContainerProps {
+    children?: ReactNode;
+    width?: number | string;
+    height?: number | string;
+    padding?: number | EdgeInsets;
+    paddingHorizontal?: number;
+    paddingVertical?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    margin?: number | EdgeInsets;
+    marginHorizontal?: number;
+    marginVertical?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    decoration?: BoxDecoration;
+    foregroundDecoration?: BoxDecoration;
+    color?: string;
+    alignment?: Alignment;
+    constraints?: BoxConstraints;
+    transform?: string;
+    transformAlignment?: Alignment;
+    clipBehavior?: "none" | "hardEdge" | "antiAlias";
+    onTap?: () => void;
+    onClick?: () => void;
+    cursor?: "pointer" | "default" | "text" | "none";
+    className?: string;
+    style?: CSSProperties;
+    id?: string;
+    role?: string;
+    ariaLabel?: string;
+}
+/**
+ * Container - Flutter-style box model component
+ *
+ * @example Basic usage
+ * ```
+ * <Container padding={16} color="#eb1660">
+ *   <Text>Hello</Text>
+ * </Container>
+ * ```
+ *
+ * @example Circular container (Flutter BoxShape.circle)
+ * ```
+ * <Container
+ *   width={100}
+ *   height={100}
+ *   decoration={{
+ *     color: '#eb1660',
+ *     shape: BoxShape.circle
+ *   }}
+ * />
+ * ```
+ *
+ * @example Gradient with shadows
+ * ```
+ * <Container
+ *   padding={20}
+ *   decoration={{
+ *     gradient: {
+ *       colors: ['#eb1660', '#ff6b9d'],
+ *       begin: '45deg'
+ *     },
+ *     borderRadius: 12,
+ *     boxShadow: [
+ *       { color: 'rgba(235, 22, 96, 0.3)', offset: { dx: 0, dy: 4 }, blurRadius: 12 }
+ *     ]
+ *   }}
+ * />
+ * ```
+ */
+declare const Container: React.FC<ContainerProps>;
+declare const EdgeInsetsAll: (value: number) => EdgeInsets;
+declare const EdgeInsetsSymmetric: ({ horizontal, vertical, }: {
+    horizontal?: number;
+    vertical?: number;
+}) => EdgeInsets;
+declare const EdgeInsetsOnly: ({ top, bottom, left, right, }: {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}) => EdgeInsets;
+/**
+ * Border.all() - Uniform border on all sides (Flutter API)
+ */
+declare const BorderAll: ({ width, color, style, }: {
+    width?: number | undefined;
+    color?: string | undefined;
+    style?: "solid" | "dashed" | "dotted" | undefined;
+}) => BoxBorder;
+/**
+ * BorderRadius.circular() - Uniform circular radius (Flutter API)
+ */
+declare const BorderRadiusCircular: (radius: number) => number;
+
+/**
+ * Centre Props - Mirrors Flutter Center widget
+ */
+interface CentreProps {
+    /**
+     * The child widget to center
+     */
+    children?: ReactNode;
+    /**
+     * If non-null, sets its width to the child's width multiplied by this factor.
+     *
+     * For example, if widthFactor is 2.0, the Centre will be twice as wide as its child.
+     * If null (default), the Centre will be as wide as its parent allows.
+     *
+     * @example
+     * ```
+     * // Centre will be exactly as wide as the child
+     * <Centre widthFactor={1.0}>
+     *   <Text>Hello</Text>
+     * </Centre>
+     *
+     * // Centre will be 1.5x wider than the child
+     * <Centre widthFactor={1.5}>
+     *   <Text>Hello</Text>
+     * </Centre>
+     * ```
+     */
+    widthFactor?: number;
+    /**
+     * If non-null, sets its height to the child's height multiplied by this factor.
+     *
+     * For example, if heightFactor is 2.0, the Centre will be twice as tall as its child.
+     * If null (default), the Centre will be as tall as its parent allows.
+     */
+    heightFactor?: number;
+    /**
+     * Additional CSS class names (for Tailwind utilities)
+     */
+    className?: string;
+    /**
+     * Custom inline styles (escape hatch)
+     */
+    style?: CSSProperties;
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+}
+/**
+ * Centre - Centers its child both horizontally and vertically
+ *
+ * Behavior (Flutter spec):
+ * - If widthFactor and heightFactor are null: expands to fill parent
+ * - If widthFactor is set: width = child's width × widthFactor
+ * - If heightFactor is set: height = child's height × heightFactor
+ * - Always centers the child within the available space
+ *
+ * @example Basic usage
+ * ```
+ * <Centre>
+ *   <Text>Centered text</Text>
+ * </Centre>
+ * ```
+ *
+ * @example With size factors
+ * ```
+ * <Centre widthFactor={1.5} heightFactor={2.0}>
+ *   <Container width={100} height={50}>
+ *     <Text>Box</Text>
+ *   </Container>
+ * </Centre>
+ * // Result: Centre will be 150px wide (100 × 1.5) and 100px tall (50 × 2.0)
+ * ```
+ *
+ * @example Full screen center
+ * ```
+ * <Centre style={{ minHeight: '100vh' }}>
+ *   <Container padding={20}>
+ *     <Text>Perfectly centered on screen</Text>
+ *   </Container>
+ * </Centre>
+ * ```
+ */
+declare const Centre: React.FC<CentreProps>;
+/**
+ * Center - American English spelling alias
+ */
+declare const Center: React.FC<CentreProps>;
+
+/**
+ * MainAxisAlignment - How to distribute children along the main axis (vertical for Column)
+ */
+declare enum MainAxisAlignment$1 {
+    /** Place children at the start (top) */
+    start = "flex-start",
+    /** Place children at the center */
+    center = "center",
+    /** Place children at the end (bottom) */
+    end = "flex-end",
+    /** Distribute remaining space evenly between children */
+    spaceBetween = "space-between",
+    /** Distribute remaining space evenly around children */
+    spaceAround = "space-around",
+    /** Distribute remaining space evenly, including edges */
+    spaceEvenly = "space-evenly"
+}
+/**
+ * CrossAxisAlignment - How to align children along the cross axis (horizontal for Column)
+ */
+declare enum CrossAxisAlignment$1 {
+    /** Align children to the start (left) */
+    start = "flex-start",
+    /** Align children to the center */
+    center = "center",
+    /** Align children to the end (right) */
+    end = "flex-end",
+    /** Stretch children to fill cross axis */
+    stretch = "stretch",
+    /** Align children by their baseline (for text) */
+    baseline = "baseline"
+}
+/**
+ * MainAxisSize - How much space should be occupied in the main axis
+ */
+declare enum MainAxisSize$1 {
+    /** Take up maximum available space */
+    max = "max",
+    /** Take up minimum space (wrap content) */
+    min = "min"
+}
+/**
+ * VerticalDirection - Order of children
+ */
+declare enum VerticalDirection {
+    /** Top to bottom (normal) */
+    down = "down",
+    /** Bottom to top (reversed) */
+    up = "up"
+}
+/**
+ * Column Props - Mirrors Flutter Column widget
+ */
+interface ColumnProps {
+    /**
+     * The widgets to display vertically
+     */
+    children?: ReactNode;
+    /**
+     * How the children should be placed along the main axis (vertical)
+     *
+     * @default MainAxisAlignment.start
+     *
+     * @example
+     * ```
+     * // Children at top
+     * <Column mainAxisAlignment={MainAxisAlignment.start}>
+     *
+     * // Children centered vertically
+     * <Column mainAxisAlignment={MainAxisAlignment.center}>
+     *
+     * // Space between children
+     * <Column mainAxisAlignment={MainAxisAlignment.spaceBetween}>
+     * ```
+     */
+    mainAxisAlignment?: MainAxisAlignment$1;
+    /**
+     * How the children should be placed along the cross axis (horizontal)
+     *
+     * @default CrossAxisAlignment.center
+     *
+     * @example
+     * ```
+     * // Left-aligned children
+     * <Column crossAxisAlignment={CrossAxisAlignment.start}>
+     *
+     * // Stretch children to full width
+     * <Column crossAxisAlignment={CrossAxisAlignment.stretch}>
+     * ```
+     */
+    crossAxisAlignment?: CrossAxisAlignment$1;
+    /**
+     * How much space should be occupied in the main axis
+     *
+     * @default MainAxisSize.max
+     *
+     * @example
+     * ```
+     * // Column takes all available height
+     * <Column mainAxisSize={MainAxisSize.max}>
+     *
+     * // Column wraps to fit children height
+     * <Column mainAxisSize={MainAxisSize.min}>
+     * ```
+     */
+    mainAxisSize?: MainAxisSize$1;
+    /**
+     * The direction to lay children (top-to-bottom or bottom-to-top)
+     *
+     * @default VerticalDirection.down
+     */
+    verticalDirection?: VerticalDirection;
+    /**
+     * How much space to place between children in the main axis
+     *
+     * @default 0
+     *
+     * @example
+     * ```
+     * // 16px gap between all children
+     * <Column spacing={16}>
+     *   <Container>Child 1</Container>
+     *   <Container>Child 2</Container>
+     * </Column>
+     * ```
+     */
+    spacing?: number;
+    /**
+     * Whether to clip children that overflow the column
+     *
+     * @default 'visible'
+     */
+    clipBehavior?: "visible" | "hidden" | "scroll";
+    /**
+     * Additional CSS class names (for Tailwind utilities)
+     */
+    className?: string;
+    /**
+     * Custom inline styles (escape hatch)
+     */
+    style?: CSSProperties;
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Click handler
+     */
+    onTap?: () => void;
+    onClick?: () => void;
+}
+/**
+ * Column - Displays children in a vertical array
+ *
+ * Layout algorithm (Flutter spec):
+ * 1. Layout non-flex children with unbounded vertical constraints
+ * 2. Divide remaining vertical space among flex children (Expanded)
+ * 3. Width = maximum width of children
+ * 4. Height = determined by mainAxisSize (max = fill parent, min = wrap content)
+ * 5. Position children according to mainAxisAlignment and crossAxisAlignment
+ *
+ * @example Basic vertical layout
+ * ```
+ * <Column>
+ *   <Text>First</Text>
+ *   <Text>Second</Text>
+ *   <Text>Third</Text>
+ * </Column>
+ * ```
+ *
+ * @example Centered with spacing
+ * ```
+ * <Column
+ *   mainAxisAlignment={MainAxisAlignment.center}
+ *   crossAxisAlignment={CrossAxisAlignment.center}
+ *   spacing={16}
+ * >
+ *   <Container padding={10}>Box 1</Container>
+ *   <Container padding={10}>Box 2</Container>
+ *   <Container padding={10}>Box 3</Container>
+ * </Column>
+ * ```
+ *
+ * @example Left-aligned, wrapping content
+ * ```
+ * <Column
+ *   mainAxisSize={MainAxisSize.min}
+ *   crossAxisAlignment={CrossAxisAlignment.start}
+ *   spacing={8}
+ * >
+ *   <Text>Line 1</Text>
+ *   <Text>Line 2</Text>
+ *   <Text>Line 3</Text>
+ * </Column>
+ * ```
+ *
+ * @example Space between items
+ * ```
+ * <Column
+ *   mainAxisAlignment={MainAxisAlignment.spaceBetween}
+ *   style={{ height: '100vh' }}
+ * >
+ *   <Header />
+ *   <Content />
+ *   <Footer />
+ * </Column>
+ * ```
+ */
+declare const Column: React.FC<ColumnProps>;
+
+/**
+ * MainAxisAlignment - How to distribute children along the main axis (horizontal for Row)
+ */
+declare enum MainAxisAlignment {
+    /** Place children at the start (left for LTR, right for RTL) */
+    start = "flex-start",
+    /** Place children at the center */
+    center = "center",
+    /** Place children at the end (right for LTR, left for RTL) */
+    end = "flex-end",
+    /** Distribute remaining space evenly between children */
+    spaceBetween = "space-between",
+    /** Distribute remaining space evenly around children */
+    spaceAround = "space-around",
+    /** Distribute remaining space evenly, including edges */
+    spaceEvenly = "space-evenly"
+}
+/**
+ * CrossAxisAlignment - How to align children along the cross axis (vertical for Row)
+ */
+declare enum CrossAxisAlignment {
+    /** Align children to the start (top) */
+    start = "flex-start",
+    /** Align children to the center */
+    center = "center",
+    /** Align children to the end (bottom) */
+    end = "flex-end",
+    /** Stretch children to fill cross axis */
+    stretch = "stretch",
+    /** Align children by their baseline (for text) */
+    baseline = "baseline"
+}
+/**
+ * MainAxisSize - How much space should be occupied in the main axis
+ */
+declare enum MainAxisSize {
+    /** Take up maximum available space */
+    max = "max",
+    /** Take up minimum space (wrap content) */
+    min = "min"
+}
+/**
+ * TextDirection - Horizontal layout direction
+ */
+declare enum TextDirection$1 {
+    /** Left to right (default for most languages) */
+    ltr = "ltr",
+    /** Right to left (for Arabic, Hebrew, etc.) */
+    rtl = "rtl"
+}
+/**
+ * Row Props - Mirrors Flutter Row widget
+ */
+interface RowProps {
+    /**
+     * The widgets to display horizontally
+     */
+    children?: ReactNode;
+    /**
+     * How the children should be placed along the main axis (horizontal)
+     *
+     * @default MainAxisAlignment.start
+     *
+     * @example
+     * ```
+     * // Children at left (LTR) or right (RTL)
+     * <Row mainAxisAlignment={MainAxisAlignment.start}>
+     *
+     * // Children centered horizontally
+     * <Row mainAxisAlignment={MainAxisAlignment.center}>
+     *
+     * // Space between children
+     * <Row mainAxisAlignment={MainAxisAlignment.spaceBetween}>
+     * ```
+     */
+    mainAxisAlignment?: MainAxisAlignment;
+    /**
+     * How the children should be placed along the cross axis (vertical)
+     *
+     * @default CrossAxisAlignment.center
+     *
+     * @example
+     * ```
+     * // Top-aligned children
+     * <Row crossAxisAlignment={CrossAxisAlignment.start}>
+     *
+     * // Stretch children to full height
+     * <Row crossAxisAlignment={CrossAxisAlignment.stretch}>
+     *
+     * // Baseline-aligned text
+     * <Row crossAxisAlignment={CrossAxisAlignment.baseline}>
+     * ```
+     */
+    crossAxisAlignment?: CrossAxisAlignment;
+    /**
+     * How much space should be occupied in the main axis
+     *
+     * @default MainAxisSize.max
+     *
+     * @example
+     * ```
+     * // Row takes all available width
+     * <Row mainAxisSize={MainAxisSize.max}>
+     *
+     * // Row wraps to fit children width
+     * <Row mainAxisSize={MainAxisSize.min}>
+     * ```
+     */
+    mainAxisSize?: MainAxisSize;
+    /**
+     * The direction to lay children (left-to-right or right-to-left)
+     *
+     * @default TextDirection.ltr
+     *
+     * @example
+     * ```
+     * // Left to right (English, Spanish, etc.)
+     * <Row textDirection={TextDirection.ltr}>
+     *
+     * // Right to left (Arabic, Hebrew, etc.)
+     * <Row textDirection={TextDirection.rtl}>
+     * ```
+     */
+    textDirection?: TextDirection$1;
+    /**
+     * How much space to place between children in the main axis
+     *
+     * @default 0
+     *
+     * @example
+     * ```
+     * // 16px gap between all children
+     * <Row spacing={16}>
+     *   <Container>Child 1</Container>
+     *   <Container>Child 2</Container>
+     * </Row>
+     * ```
+     */
+    spacing?: number;
+    /**
+     * Whether to clip children that overflow the row
+     *
+     * @default 'visible'
+     */
+    clipBehavior?: "visible" | "hidden" | "scroll";
+    /**
+     * Additional CSS class names (for Tailwind utilities)
+     */
+    className?: string;
+    /**
+     * Custom inline styles (escape hatch)
+     */
+    style?: CSSProperties;
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Click handler
+     */
+    onTap?: () => void;
+    onClick?: () => void;
+}
+/**
+ * Row - Displays children in a horizontal array
+ *
+ * Layout algorithm (Flutter spec):
+ * 1. Layout non-flex children with unbounded horizontal constraints
+ * 2. Divide remaining horizontal space among flex children (Expanded)
+ * 3. Height = maximum height of children
+ * 4. Width = determined by mainAxisSize (max = fill parent, min = wrap content)
+ * 5. Position children according to mainAxisAlignment and crossAxisAlignment
+ *
+ * **Important:** Row does not scroll. If children overflow, consider using ListView.
+ *
+ * @example Basic horizontal layout
+ * ```
+ * <Row>
+ *   <Container padding={10}>Box 1</Container>
+ *   <Container padding={10}>Box 2</Container>
+ *   <Container padding={10}>Box 3</Container>
+ * </Row>
+ * ```
+ *
+ * @example Centered with spacing
+ * ```
+ * <Row
+ *   mainAxisAlignment={MainAxisAlignment.center}
+ *   crossAxisAlignment={CrossAxisAlignment.center}
+ *   spacing={16}
+ * >
+ *   <Container padding={10}>Box 1</Container>
+ *   <Container padding={10}>Box 2</Container>
+ * </Row>
+ * ```
+ *
+ * @example Space between items (navbar pattern)
+ * ```
+ * <Row mainAxisAlignment={MainAxisAlignment.spaceBetween}>
+ *   <Logo />
+ *   <NavLinks />
+ *   <AuthButtons />
+ * </Row>
+ * ```
+ *
+ * @example Right-to-left layout
+ * ```
+ * <Row textDirection={TextDirection.rtl}>
+ *   <Text>مرحبا</Text>
+ *   <Text>بالعالم</Text>
+ * </Row>
+ * ```
+ *
+ * @example Icon + Text pattern
+ * ```
+ * <Row spacing={8} crossAxisAlignment={CrossAxisAlignment.center}>
+ *   <Icon name="star" />
+ *   <Text>Premium</Text>
+ * </Row>
+ * ```
+ */
+declare const Row: React.FC<RowProps>;
+
+/**
+ * StackFit - How to size non-positioned children in the stack
+ */
+declare enum StackFit {
+    /** Non-positioned children are as large as the stack allows (default in web) */
+    expand = "expand",
+    /** Non-positioned children are allowed to be as large as they want */
+    loose = "loose",
+    /** Non-positioned children are forced to be as small as possible */
+    passthrough = "passthrough"
+}
+/**
+ * Clip - How content outside bounds should be treated
+ */
+declare enum Clip {
+    /** Clip, but without anti-aliasing */
+    hardEdge = "hidden",
+    /** Clip with anti-aliasing */
+    antiAlias = "hidden",
+    /** Clip with anti-aliasing and save layer */
+    antiAliasWithSaveLayer = "hidden",
+    /** Do not clip */
+    none = "visible"
+}
+/**
+ * Alignment - Predefined alignment positions (Flutter pattern)
+ */
+type StackAlignment = "topLeft" | "topCenter" | "topRight" | "centerLeft" | "center" | "centerRight" | "bottomLeft" | "bottomCenter" | "bottomRight";
+/**
+ * TextDirection - For resolving alignment in RTL contexts
+ */
+declare enum TextDirection {
+    ltr = "ltr",
+    rtl = "rtl"
+}
+/**
+ * Stack Props - Mirrors Flutter Stack widget
+ */
+interface StackProps {
+    /**
+     * The widgets to stack (painted in order: first = bottom, last = top)
+     */
+    children?: ReactNode;
+    /**
+     * How to align non-positioned and partially-positioned children
+     *
+     * @default 'topLeft' (LTR) or 'topRight' (RTL)
+     *
+     * @example
+     * ```
+     * // Center all non-positioned children
+     * <Stack alignment="center">
+     *   <Container>Background</Container>
+     *   <Container>Centered on top</Container>
+     * </Stack>
+     * ```
+     */
+    alignment?: StackAlignment;
+    /**
+     * How to size non-positioned children in the stack
+     *
+     * @default StackFit.loose
+     *
+     * @example
+     * ```
+     * // Force children to fill the stack
+     * <Stack fit={StackFit.expand}>
+     *
+     * // Let children size themselves
+     * <Stack fit={StackFit.loose}>
+     * ```
+     */
+    fit?: StackFit;
+    /**
+     * Text direction for resolving alignment
+     *
+     * @default TextDirection.ltr
+     */
+    textDirection?: TextDirection;
+    /**
+     * How to clip content that overflows the stack
+     *
+     * @default Clip.hardEdge
+     */
+    clipBehavior?: Clip;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom inline styles
+     */
+    style?: CSSProperties;
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Click handler
+     */
+    onTap?: () => void;
+    onClick?: () => void;
+}
+/**
+ * Stack - Positions children relative to the edges of its box
+ *
+ * Layout behavior (Flutter spec):
+ * 1. Non-positioned children are positioned according to `alignment`
+ * 2. Stack sizes itself to contain all non-positioned children
+ * 3. Positioned children are placed relative to stack edges
+ * 4. Children are painted in order (first = bottom, last = top)
+ *
+ * **Important:** Stack children are painted in order. To change z-index, reorder children.
+ *
+ * @example Basic layering
+ * ```
+ * <Stack>
+ *   <Container width={100} height={100} color="red" />
+ *   <Container width={80} height={80} color="green" />
+ *   <Container width={60} height={60} color="blue" />
+ * </Stack>
+ * ```
+ *
+ * @example Positioned children
+ * ```
+ * <Stack style={{ width: 300, height: 300 }}>
+ *   <Container color="white" />
+ *   <Positioned top={10} left={10}>
+ *     <Container padding={10} color="red">
+ *       <p>Top Left</p>
+ *     </Container>
+ *   </Positioned>
+ *   <Positioned bottom={10} right={10}>
+ *     <Container padding={10} color="blue">
+ *       <p>Bottom Right</p>
+ *     </Container>
+ *   </Positioned>
+ * </Stack>
+ * ```
+ *
+ * @example Image with gradient overlay (your hero pattern)
+ * ```
+ * <Stack style={{ width: '100%', height: '100vh' }}>
+ *   <Container
+ *     decoration={{
+ *       image: {
+ *         image: '/hero-bg.jpg',
+ *         fit: 'cover',
+ *       },
+ *     }}
+ *   />
+ *   <Container
+ *     decoration={{
+ *       gradient: {
+ *         type: 'linear',
+ *         colors: ['rgba(13, 13, 13, 0)', 'rgba(13, 13, 13, 0.9)'],
+ *         begin: 'to bottom',
+ *       },
+ *     }}
+ *   />
+ *   <Positioned bottom={40}>
+ *     <Container padding={40}>
+ *       <h1>Hero Title</h1>
+ *     </Container>
+ *   </Positioned>
+ * </Stack>
+ * ```
+ */
+declare const Stack: React.FC<StackProps>;
+
+/**
+ * Positioned Props - Mirrors Flutter Positioned widget
+ */
+interface PositionedProps {
+    /**
+     * The child widget to position
+     */
+    children?: ReactNode;
+    /**
+     * Distance from top edge of stack
+     *
+     * @example
+     * ```
+     * <Positioned top={20}>
+     *   <Container>20px from top</Container>
+     * </Positioned>
+     * ```
+     */
+    top?: number | string;
+    /**
+     * Distance from bottom edge of stack
+     */
+    bottom?: number | string;
+    /**
+     * Distance from left edge of stack (in LTR mode)
+     */
+    left?: number | string;
+    /**
+     * Distance from right edge of stack (in LTR mode)
+     */
+    right?: number | string;
+    /**
+     * Width of the positioned child
+     *
+     * @example
+     * ```
+     * <Positioned left={0} right={0} width="100%">
+     *   <Container>Full width</Container>
+     * </Positioned>
+     * ```
+     */
+    width?: number | string;
+    /**
+     * Height of the positioned child
+     */
+    height?: number | string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom inline styles
+     */
+    style?: CSSProperties;
+}
+/**
+ * Positioned - Controls where a child of Stack is positioned
+ *
+ * Must be a direct child of Stack. At least one of top, bottom, left, or right
+ * must be non-null.
+ *
+ * @example Basic positioning
+ * ```
+ * <Stack style={{ width: 300, height: 300 }}>
+ *   <Positioned top={10} left={10}>
+ *     <Container>Top Left</Container>
+ *   </Positioned>
+ *   <Positioned bottom={10} right={10}>
+ *     <Container>Bottom Right</Container>
+ *   </Positioned>
+ * </Stack>
+ * ```
+ *
+ * @example Full width at bottom
+ * ```
+ * <Stack style={{ width: '100%', height: '100vh' }}>
+ *   <Positioned left={0} right={0} bottom={0}>
+ *     <Container padding={20} color="rgba(0,0,0,0.8)">
+ *       <p>Footer overlay</p>
+ *     </Container>
+ *   </Positioned>
+ * </Stack>
+ * ```
+ *
+ * @example Centered with specific size
+ * ```
+ * <Stack style={{ width: 400, height: 400 }}>
+ *   <Positioned
+ *     top="50%"
+ *     left="50%"
+ *     width={200}
+ *     height={200}
+ *     style={{ transform: 'translate(-50%, -50%)' }}
+ *   >
+ *     <Container color="blue">Centered</Container>
+ *   </Positioned>
+ * </Stack>
+ * ```
+ *
+ * @example Privogram hero badge (your design)
+ * ```
+ * <Stack style={{ width: '100%', height: '100vh' }}>
+ *   <Container decoration={{ image: { image: '/bg.jpg', fit: 'cover' } }} />
+ *
+ *   <Positioned top={20} right={20}>
+ *     <Container
+ *       padding={8}
+ *       paddingHorizontal={16}
+ *       decoration={{
+ *         color: 'rgba(13, 13, 13, 0.6)',
+ *         borderRadius: 99,
+ *       }}
+ *     >
+ *       <span style={{ color: '#eb1660' }}>Early Access</span>
+ *     </Container>
+ *   </Positioned>
+ * </Stack>
+ * ```
+ */
+declare const Positioned: React.FC<PositionedProps>;
+
+/**
+ * PositionedFill - Shorthand for Positioned that fills the entire stack
+ *
+ * Equivalent to: Positioned(top: 0, bottom: 0, left: 0, right: 0)
+ *
+ * @example Background overlay
+ * ```
+ * <Stack style={{ width: '100%', height: '100vh' }}>
+ *   <Container decoration={{ image: { image: '/bg.jpg', fit: 'cover' } }} />
+ *
+ *   <PositionedFill>
+ *     <Container decoration={{
+ *       gradient: {
+ *         colors: ['rgba(13,13,13,0)', 'rgba(13,13,13,0.9)'],
+ *         begin: 'to bottom',
+ *       },
+ *     }} />
+ *   </PositionedFill>
+ * </Stack>
+ * ```
+ */
+declare const PositionedFill: React.FC<Omit<PositionedProps, "top" | "bottom" | "left" | "right">>;
+
+/**
+ * SizedBox Props - Mirrors Flutter SizedBox widget
+ */
+interface SizedBoxProps {
+    /**
+     * The widget below this widget in the tree
+     */
+    children?: ReactNode;
+    /**
+     * If non-null, requires the child to have exactly this width
+     *
+     * @example
+     * ```
+     * <SizedBox width={200}>
+     *   <p>200px wide</p>
+     * </SizedBox>
+     * ```
+     */
+    width?: number | string;
+    /**
+     * If non-null, requires the child to have exactly this height
+     *
+     * @example
+     * ```
+     * <SizedBox height={100}>
+     *   <p>100px tall</p>
+     * </SizedBox>
+     * ```
+     */
+    height?: number | string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom inline styles (escape hatch)
+     */
+    style?: CSSProperties;
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+}
+/**
+ * SizedBox.expand - Creates a box that fills all available space
+ *
+ * Equivalent to: SizedBox(width: double.infinity, height: double.infinity)
+ *
+ * @example Fill parent container
+ * ```
+ * <Container width={400} height={400}>
+ *   <SizedBox.expand>
+ *     <Container color="#eb1660" />
+ *   </SizedBox.expand>
+ * </Container>
+ * ```
+ */
+declare const SizedBoxExpand: React.FC<Omit<SizedBoxProps, "width" | "height">>;
+/**
+ * SizedBox.shrink - Creates a box that tries to be as small as possible
+ *
+ * Equivalent to: SizedBox(width: 0, height: 0)
+ *
+ * @example Conditional spacer (collapsed when not needed)
+ * ```
+ * {showSpacer ? <SizedBox height={20} /> : <SizedBox.shrink />}
+ * ```
+ */
+declare const SizedBoxShrink: React.FC<Omit<SizedBoxProps, "width" | "height">>;
+/**
+ * SizedBox.square - Creates a box with equal width and height
+ *
+ * @example 100x100 square
+ * ```
+ * <SizedBox.square dimension={100}>
+ *   <Container color="#eb1660" />
+ * </SizedBox.square>
+ * ```
+ */
+declare const SizedBoxSquare: React.FC<Omit<SizedBoxProps, "width" | "height"> & {
+    dimension?: number | string;
+}>;
+/**
+ * SizedBox component with static methods
+ */
+interface SizedBoxComponent extends React.FC<SizedBoxProps> {
+    expand: typeof SizedBoxExpand;
+    shrink: typeof SizedBoxShrink;
+    square: typeof SizedBoxSquare;
+}
+declare const SizedBox: SizedBoxComponent;
+
+/**
+ * Padding Props - Mirrors Flutter Padding widget
+ */
+interface PaddingProps {
+    /**
+     * The widget below this widget in the tree
+     */
+    children?: ReactNode;
+    /**
+     * The amount of space by which to inset the child
+     *
+     * @example
+     * ```
+     * // All sides 16px
+     * <Padding padding={16}>
+     *
+     * // Symmetric padding
+     * <Padding padding={{ horizontal: 20, vertical: 10 }}>
+     *
+     * // Individual sides
+     * <Padding padding={{ top: 10, left: 20, right: 20, bottom: 10 }}>
+     * ```
+     */
+    padding: number | EdgeInsets;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom inline styles (escape hatch)
+     */
+    style?: CSSProperties;
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+}
+/**
+ * Padding - A widget that insets its child by the given padding
+ *
+ * When passing layout constraints to its child, padding shrinks the constraints
+ * by the given padding. Padding then sizes itself to its child's size, inflated
+ * by the padding.
+ *
+ * **Lightweight alternative to Container when you only need padding.**
+ *
+ * @example All sides equal
+ * ```
+ * <Padding padding={16}>
+ *   <Text>Hello World!</Text>
+ * </Padding>
+ * ```
+ *
+ * @example Symmetric padding
+ * ```
+ * <Padding padding={{ horizontal: 20, vertical: 10 }}>
+ *   <Text>Hello World!</Text>
+ * </Padding>
+ * ```
+ *
+ * @example Individual sides
+ * ```
+ * <Padding padding={{ top: 10, left: 20, right: 20, bottom: 30 }}>
+ *   <Text>Hello World!</Text>
+ * </Padding>
+ * ```
+ *
+ * @example Card with padding (Flutter pattern)
+ * ```
+ * <Container
+ *   decoration={{
+ *     color: '#1a1a1a',
+ *     borderRadius: 16,
+ *   }}
+ * >
+ *   <Padding padding={20}>
+ *     <Column spacing={8}>
+ *       <h3>Card Title</h3>
+ *       <p>Card content goes here</p>
+ *     </Column>
+ *   </Padding>
+ * </Container>
+ * ```
+ */
+declare const Padding: React.FC<PaddingProps>;
+
+export { type Alignment, BorderAll, BorderRadiusCircular, type BoxBorder, type BoxConstraints, type BoxDecoration, type BoxShadow, BoxShape, Center, Centre, type CentreProps, Clip, Column, CrossAxisAlignment$1 as ColumnCrossAxisAlignment, MainAxisAlignment$1 as ColumnMainAxisAlignment, MainAxisSize$1 as ColumnMainAxisSize, type ColumnProps, Container, type ContainerProps, CrossAxisAlignment, type DecorationImage, type EdgeInsets, EdgeInsetsAll, EdgeInsetsOnly, EdgeInsetsSymmetric, type Gradient, MainAxisAlignment, MainAxisSize, Padding, type PaddingProps, Positioned, PositionedFill, type PositionedProps, Row, type RowProps, SizedBox, type SizedBoxProps, Stack, type StackAlignment, StackFit, type StackProps, TextDirection$1 as TextDirection, VerticalDirection };