/**
 * GridItem — a tile in a bento grid, and the grid that lays it out.
 *
 * ```tsx
 * <GridItem.Group columns={2} gap={12}>
 *   <GridItem colSpan={2}>
 *     <GridItem.Media variant="icon"><ZapIcon /></GridItem.Media>
 *     <GridItem.Title>Deploys</GridItem.Title>
 *     <GridItem.Value>1,284</GridItem.Value>
 *     <GridItem.Description>this week</GridItem.Description>
 *   </GridItem>
 *   <GridItem rowSpan={2}>…</GridItem>
 *   <GridItem>…</GridItem>
 * </GridItem.Group>
 * ```
 *
 * ## Why the group places the tiles
 *
 * `Item` next door is a row, and a list of rows is a column of views — the
 * layout falls out of the flexbox and nothing has to be measured. A bento is
 * not that. Its whole idea is that tiles are different sizes and the grid still
 * lines up: a wide tile and the two square ones beside it share a left edge, a
 * tall one runs past the tile next to it and the next tile fills in underneath.
 *
 * A wrapping flex row cannot do the last of those. Wrapping puts everything
 * that did not fit on a *new line*, so nothing ever tucks under a tall tile,
 * and `rowSpan` in a wrapping row is a prop that quietly does nothing.
 *
 * So the group measures itself, walks its children into the first free cell
 * that fits each one — row by row, the way a grid places anything it is not
 * told where to put — and positions them absolutely. Every tile is a whole
 * number of cells, which is what makes the edges line up, and the group's own
 * height is the number of rows it ended up needing.
 *
 * The consequence worth knowing: **a tile's height is its cells, not its
 * content**. That is the right way round for a bento — a grid of boxes that
 * each grew to fit its own text is not a grid — but it does mean long text
 * needs `numberOfLines`, a smaller `size`, or a taller `rowSpan`.
 *
 * ## Nesting
 *
 * A group inside a tile is a group like any other, and it measures the cell it
 * was put in. That is how a bento gets a sub-rhythm — two small tiles stacked
 * inside one cell of the outer grid — without the outer grid needing a notion
 * of half a row.
 */
import { type ReactNode } from 'react';
import { View, type ViewProps } from 'react-native';
import { type VariantProps } from 'tailwind-variants';
import { type AnimatedPressableProps } from '../../primitives/animated-pressable.js';
import { type TextProps } from '../../primitives/text.js';
type GridItemSize = 'default' | 'sm';
declare const gridItemVariants: import("tailwind-variants").TVReturnType<{
    variant: {
        /** A card in a tray — the tile that reads as a tile. */
        default: {
            root: string;
        };
        /** Outline only, for a grid over a coloured or patterned page. */
        outline: {
            root: string;
        };
        /** Filled and unbordered, for a quieter tile among louder ones. */
        muted: {
            root: string;
        };
        /** Nothing at all: the tile is whatever is put inside it. */
        plain: {
            root: string;
        };
    };
    size: {
        default: {
            root: string;
            title: string;
            value: string;
            description: string;
        };
        sm: {
            root: string;
            title: string;
            value: string;
            description: string;
        };
    };
    disabled: {
        true: {
            root: string;
        };
    };
}, {
    root: string;
    title: string;
    value: string;
    description: string;
}, undefined, {
    variant: {
        /** A card in a tray — the tile that reads as a tile. */
        default: {
            root: string;
        };
        /** Outline only, for a grid over a coloured or patterned page. */
        outline: {
            root: string;
        };
        /** Filled and unbordered, for a quieter tile among louder ones. */
        muted: {
            root: string;
        };
        /** Nothing at all: the tile is whatever is put inside it. */
        plain: {
            root: string;
        };
    };
    size: {
        default: {
            root: string;
            title: string;
            value: string;
            description: string;
        };
        sm: {
            root: string;
            title: string;
            value: string;
            description: string;
        };
    };
    disabled: {
        true: {
            root: string;
        };
    };
}, {
    root: string;
    title: string;
    value: string;
    description: string;
}, import("tailwind-variants").TVReturnType<{
    variant: {
        /** A card in a tray — the tile that reads as a tile. */
        default: {
            root: string;
        };
        /** Outline only, for a grid over a coloured or patterned page. */
        outline: {
            root: string;
        };
        /** Filled and unbordered, for a quieter tile among louder ones. */
        muted: {
            root: string;
        };
        /** Nothing at all: the tile is whatever is put inside it. */
        plain: {
            root: string;
        };
    };
    size: {
        default: {
            root: string;
            title: string;
            value: string;
            description: string;
        };
        sm: {
            root: string;
            title: string;
            value: string;
            description: string;
        };
    };
    disabled: {
        true: {
            root: string;
        };
    };
}, {
    root: string;
    title: string;
    value: string;
    description: string;
}, undefined, unknown, unknown, undefined>>;
declare const mediaVariants: import("tailwind-variants").TVReturnType<{
    variant: {
        /** No box — for an Avatar or anything that styles itself. */
        default: string;
        /** Rounded square tile sized for an icon. */
        icon: string;
        /** Clipped frame for an image or thumbnail. */
        image: string;
    };
    size: {
        default: string;
        sm: string;
    };
}, undefined, "shrink-0 items-center justify-center", {
    variant: {
        /** No box — for an Avatar or anything that styles itself. */
        default: string;
        /** Rounded square tile sized for an icon. */
        icon: string;
        /** Clipped frame for an image or thumbnail. */
        image: string;
    };
    size: {
        default: string;
        sm: string;
    };
}, undefined, import("tailwind-variants").TVReturnType<{
    variant: {
        /** No box — for an Avatar or anything that styles itself. */
        default: string;
        /** Rounded square tile sized for an icon. */
        icon: string;
        /** Clipped frame for an image or thumbnail. */
        image: string;
    };
    size: {
        default: string;
        sm: string;
    };
}, undefined, "shrink-0 items-center justify-center", unknown, unknown, undefined>>;
export interface GridItemGroupProps extends ViewProps {
    className?: string;
    /** How many tracks wide the grid is. */
    columns?: number;
    /** Gutter between tiles, in points — both ways. */
    gap?: number;
    /**
     * The shape of one cell, as width ÷ height. `1` is square; below one the
     * cells are taller than they are wide. Ignored when `rowHeight` is given.
     */
    aspect?: number;
    /** Cell height in points, when the grid should not be driven by its width. */
    rowHeight?: number;
    /** Density for every tile in the grid. Set here rather than on each one. */
    size?: GridItemSize;
    children?: ReactNode;
}
export interface GridItemProps extends Omit<AnimatedPressableProps, 'children' | 'disabled'>, Omit<VariantProps<typeof gridItemVariants>, 'disabled' | 'size'> {
    className?: string;
    disabled?: boolean;
    /**
     * How many tracks wide the tile is. Clamped to the group's column count, so
     * a tile asking for three columns of a two-column grid is two wide rather
     * than overflowing it.
     *
     * Read by `GridItem.Group`, which does the placing — a tile does not size
     * itself, because a tile that sized itself would not be in a grid.
     */
    colSpan?: number;
    /** How many rows tall it is. Also read by the group. */
    rowSpan?: number;
    children?: ReactNode;
}
export interface GridItemBackgroundProps extends ViewProps {
    className?: string;
    children?: ReactNode;
}
export interface GridItemMediaProps extends ViewProps, VariantProps<typeof mediaVariants> {
    className?: string;
    children?: ReactNode;
}
export interface GridItemTitleProps extends TextProps {
    className?: string;
}
export interface GridItemValueProps extends TextProps {
    className?: string;
}
export interface GridItemDescriptionProps extends TextProps {
    className?: string;
}
export interface GridItemFooterProps extends ViewProps {
    className?: string;
    children?: ReactNode;
}
export interface GridItemActionsProps extends ViewProps {
    className?: string;
    children?: ReactNode;
}
export declare const GridItem: import("react").ForwardRefExoticComponent<GridItemProps & import("react").RefAttributes<View>> & {
    Group: import("react").ForwardRefExoticComponent<GridItemGroupProps & import("react").RefAttributes<View>>;
    Background: import("react").ForwardRefExoticComponent<GridItemBackgroundProps & import("react").RefAttributes<View>>;
    Media: import("react").ForwardRefExoticComponent<GridItemMediaProps & import("react").RefAttributes<View>>;
    Title: import("react").ForwardRefExoticComponent<GridItemTitleProps & import("react").RefAttributes<import("react-native").Text>>;
    Value: import("react").ForwardRefExoticComponent<GridItemValueProps & import("react").RefAttributes<import("react-native").Text>>;
    Description: import("react").ForwardRefExoticComponent<GridItemDescriptionProps & import("react").RefAttributes<import("react-native").Text>>;
    Footer: import("react").ForwardRefExoticComponent<GridItemFooterProps & import("react").RefAttributes<View>>;
    Actions: import("react").ForwardRefExoticComponent<GridItemActionsProps & import("react").RefAttributes<View>>;
};
export {};
//# sourceMappingURL=index.d.ts.map