import { Vec2 } from "../math/Vec2";
import type { Node } from "./Node";
/**
 * Internal state of the node. Might be useful for debugging or hacking around but it is subject
 * to change at any point without notice.
 */
export type LayoutNodeState = {
    /**
     * Temporary array used by layout.
     */
    children: Array<Array<Node>>;
    /**
     * Height of the element excluding scrollbar.
     */
    clientHeight: number;
    /**
     * Width of the element excluding scrollbar.
     */
    clientWidth: number;
    /**
     * Screen-space position.
     */
    clipSize: Vec2;
    /**
     * Screen-space position.
     */
    clipStart: Vec2;
    /**
     *
     */
    hasHorizontalScrollbar: boolean;
    /**
     *
     */
    hasVerticalScrollbar: boolean;
    /**
     * Height of the element including (potential) scrollbar and scrollable content.
     */
    scrollHeight: number;
    /**
     * Width of the element including (potential) scrollbar and scrollable content.
     */
    scrollWidth: number;
    /**
     * Current scroll position relative to parent.
     */
    scrollX: number;
    /**
     * Current scroll position relative to parent.
     */
    scrollY: number;
    /**
     * Read by `paint()`, written by `layout()`.
     */
    textWidthLimit?: number;
    /**
     * Sum of all scroll positions inside the parent chain.
     */
    totalScrollX: number;
    /**
     * Sum of all scroll positions inside the parent chain.
     */
    totalScrollY: number;
    /**
     * Screen-space position of element after layout (pre-scroll).
     */
    x: number;
    /**
     * Screen-space position of element after layout (pre-scroll).
     */
    y: number;
};
export declare const defaultLayoutNodeState: {
    children: never[];
    clientHeight: number;
    clientWidth: number;
    clipSize: Vec2;
    clipStart: Vec2;
    hasHorizontalScrollbar: boolean;
    hasVerticalScrollbar: boolean;
    scrollHeight: number;
    scrollWidth: number;
    scrollX: number;
    scrollY: number;
    totalScrollX: number;
    totalScrollY: number;
    x: number;
    y: number;
};
/**
 * Corresponds to CSS `align-items`. Controls positioning of children on the cross axis.
 */
export declare const enum AlignItems {
    Center = 0,
    End = 1,
    Start = 2,
    /**
     * Stretches the element to fill the parent's cross axis.
     */
    Stretch = 3
}
/**
 *  Corresponds to CSS `justify-content`. Controls positioning of children on the main axis.
 */
export declare const enum JustifyContent {
    Center = 0,
    End = 1,
    /**
     * Uses equal gaps between all elements and half of that gap before the first element and after
     * the last element.
     */
    SpaceAround = 2,
    /**
     * Does not leave any gap before the first element or after the last element.
     */
    SpaceBetween = 3,
    /**
     * Uses equal gaps between all elements and before the first element and after the last element.
     */
    SpaceEvenly = 4,
    Start = 5
}
/**
 * Corresponds to CSS `align-content`, which controls positions and sizes of lines in the flex
 * wrap. Does not have any effect if `FlexWrap` is `NoWrap`.
 */
export declare const enum AlignContent {
    Center = 0,
    End = 1,
    /**
     * Uses equal gaps between all elements and half of that gap before the first element and after
     * the last element.
     */
    SpaceAround = 2,
    /**
     * Does not leave any gap before the first element or after the last element.
     */
    SpaceBetween = 3,
    /**
     * Uses equal gaps between all elements and before the first element and after the last element.
     */
    SpaceEvenly = 4,
    Start = 5,
    Stretch = 6
}
/**
 * Corresponds to CSS `align-self`.
 */
export declare const enum AlignSelf {
    /**
     * Does not override the value of parent's `AlignItems`.
     */
    Auto = 0,
    Center = 1,
    End = 2,
    Start = 3,
    /**
     * Stretches the element to fill the parent's cross axis.
     */
    Stretch = 4
}
/**
 * Corresponds to CSS `flex-direction`.
 */
export declare const enum FlexDirection {
    /**
     * Main axis is the vertical one.
     */
    Column = 0,
    /**
     * Reverses the order of elements.
     */
    ColumnReverse = 1,
    /**
     * Main axis is the horizontal one.
     */
    Row = 2,
    /**
     * Reverses the order of elements.
     */
    RowReverse = 3
}
/**
 * Corresponds to CSS flex-wrap.
 */
export declare const enum FlexWrap {
    /**
     * Does not wrap lines, making them potentially overflow the parent.
     */
    NoWrap = 0,
    /**
     * Wraps lines of elements if they exceed available space in the main axis.
     */
    Wrap = 1,
    /**
     * Reverses the order of lines.
     */
    WrapReverse = 2
}
/**
 * Determines how the element is clipped. Corresponds to CSS overflow.
 */
export declare const enum Overflow {
    /**
     * Shows scrollbars if needed.
     */
    Auto = 0,
    /**
     * Clips content but doesn't show scrollbars.
     */
    Hidden = 1,
    /**
     * Shows scrollbars always.
     */
    Scroll = 2,
    /**
     * Lets content overflow the parent.
     */
    Visible = 3
}
/**
 * Corresponds to CSS display.
 */
export declare const enum Display {
    /**
     * Behaves similarly to `flex` in CSS.
     */
    Flex = 0,
    /**
     * Hides element from layout and prevents it from participating in layout calculations.
     */
    None = 1
}
/**
 * Corresponds to CSS position.
 */
export declare const enum Position {
    /**
     * The element will not participate in layout of other elements within the same parent.
     * Coordinates are relative to the parent (since every node is either absolute or relative).
     */
    Absolute = 0,
    /**
     * The name originates from CSS where it means that the offset modifiers (`top`, `left`, etc.)
     * will move the element around but it will not influence the layout of other elements.
     */
    Relative = 1
}
/**
 * All layout properties.
 */
export type LayoutProps = {
    /**
     * Controls positioning of rows (or columns) when wrapping.
     */
    alignContent?: AlignContent;
    /**
     * Controls positioning of children on the cross axis.
     */
    alignItems?: AlignItems;
    /**
     * Controls positioning of the item itself on the cross axis.
     */
    alignSelf?: AlignSelf;
    /**
     * Enforces a specific aspect ratio on the size of the element. Uses the specified size
     * (either `width` or `height`) for calculating the other dimension. Respects `minWidth` and
     * `minHeight`.
     */
    aspectRatio?: number;
    borderBottomWidth?: number;
    borderLeftWidth?: number;
    borderRightWidth?: number;
    borderTopWidth?: number;
    borderWidth?: number;
    bottom?: number;
    /**
     * Overrides `gap` for columns.
     */
    columnGap?: number;
    display?: Display;
    flex?: number;
    /**
     * In row does the same as `width` and in column does the same as `height`.
     */
    flexBasis?: number | `${number}%`;
    flexDirection?: FlexDirection;
    flexGrow?: number;
    flexShrink?: number;
    flexWrap?: FlexWrap;
    gap?: number;
    height?: number | `${number}%`;
    /**
     * Controls positioning of children on the main axis.
     */
    justifyContent?: JustifyContent;
    left?: number;
    margin?: number;
    /**
     * Overrides `marginVertical` on the bottom.
     */
    marginBottom?: number;
    /**
     * Overrides `margin` on horizontal directions.
     */
    marginHorizontal?: number;
    /**
     * Overrides `marginHorizontal` on the left.
     */
    marginLeft?: number;
    /**
     * Overrides `marginHorizontal` on the right.
     */
    marginRight?: number;
    /**
     * Overrides `marginVertical` on the top.
     */
    marginTop?: number;
    /**
     * Overrides `margin` on vertical directions.
     */
    marginVertical?: number;
    maxHeight?: number | `${number}%`;
    maxWidth?: number | `${number}%`;
    minHeight?: number | `${number}%`;
    minWidth?: number | `${number}%`;
    overflow?: Overflow;
    overflowX?: Overflow;
    overflowY?: Overflow;
    padding?: number;
    paddingBottom?: number;
    paddingHorizontal?: number;
    paddingLeft?: number;
    paddingRight?: number;
    paddingTop?: number;
    paddingVertical?: number;
    position?: Position;
    right?: number;
    /**
     * Overrides `gap` for rows.
     */
    rowGap?: number;
    top?: number;
    width?: number | `${number}%`;
    zIndex?: number;
};
/**
 * All shorthand properties are expanded. All properties with defaults are required. Some properties
 * might rename undefined if that is recognized as a valid value by the layout.
 */
export type ExactLayoutProps = Required<Omit<LayoutProps, "aspectRatio" | "bottom" | "flexBasis" | "height" | "left" | "margin" | "marginHorizontal" | "marginVertical" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "overflow" | "overflowX" | "overflowY" | "padding" | "paddingHorizontal" | "paddingVertical" | "right" | "top" | "width" | "zIndex">> & {
    aspectRatio: LayoutProps["aspectRatio"];
    bottom: LayoutProps["bottom"];
    flexBasis: LayoutProps["flexBasis"];
    height: LayoutProps["height"];
    left: LayoutProps["left"];
    maxHeight: LayoutProps["maxHeight"];
    maxWidth: LayoutProps["maxWidth"];
    minHeight: LayoutProps["minHeight"];
    minWidth: LayoutProps["minWidth"];
    overflowX: LayoutProps["overflowX"];
    overflowY: LayoutProps["overflowY"];
    right: LayoutProps["right"];
    top: LayoutProps["top"];
    width: LayoutProps["width"];
    zIndex: LayoutProps["zIndex"];
};
export type DecorativeProps = {
    backgroundColor?: string;
    borderBottomLeftRadius?: number;
    borderBottomRightRadius?: number;
    borderColor?: string;
    borderRadius?: number;
    borderTopLeftRadius?: number;
    borderTopRightRadius?: number;
    /**
     * Not implemented yet.
     */
    boxShadowColor?: string;
    /**
     * Not implemented yet.
     */
    boxShadowOffsetX?: number;
    /**
     * Not implemented yet.
     */
    boxShadowOffsetY?: number;
    /**
     * Not implemented yet.
     */
    boxShadowRadius?: number;
    /**
     * Not implemented yet.
     */
    opacity?: number;
};
export type ExactDecorativeProps = Required<Omit<DecorativeProps, "borderRadius">>;
/**
 * Corresponds to CSS `text-transform`.
 */
export declare const enum TextTransform {
    None = 0,
    Capitalize = 1,
    Lowercase = 2,
    Uppercase = 3
}
/**
 * Corresponds to CSS `text-align`.
 */
export declare const enum TextAlign {
    Center = 0,
    Left = 1,
    Right = 2
}
export declare const enum Whitespace {
    /**
     * Text will wrap to the next line if it exceeds the width of the parent (if defined).
     */
    Normal = 0,
    /**
     * Text will never wrap to the next line.
     */
    NoWrap = 1
}
/**
 * Controls how text is rendered. Note that due to a custom text renderer, there might be some
 * differences in how text is rendered compared to a browser.
 */
export type TextStyleProps = {
    color: string;
    /**
     * As defined in the lookups object.
     */
    fontName: string;
    fontSize?: number;
    lineHeight?: number;
    textAlign?: TextAlign;
    textTransform?: TextTransform;
    whitespace?: Whitespace;
};
export type ViewStyleProps = LayoutProps & DecorativeProps;
export declare const defaultTextStyleProps: Required<TextStyleProps>;
export declare function normalizeLayoutProps<T extends LayoutProps, S extends ExactLayoutProps>(input: T): S;
export declare function normalizeDecorativeProps<T extends DecorativeProps, S extends ExactDecorativeProps>(input: T): S;