import "react-loading-skeleton/dist/skeleton.css";
import { GridProps, GridItemProps, ButtonProps } from "@bigcommerce/big-design";
import React from "react";
import { HeadingTag } from "@bigcommerce/big-design/dist/components/Typography/types";
/**
 * Interface for button props used within the CardGridItem component.
 * Extends BigDesign's ButtonProps.
 */
export interface CardGridButtonProps extends ButtonProps {
    /** Text to be displayed inside the button */
    text: string;
}
/**
 * Interface for props used in the CardGridItem component.
 * Extends BigDesign's GridItemProps.
 */
export interface CardGridItemProps extends GridItemProps {
    /** Optional button configuration */
    button?: CardGridButtonProps;
    /** Heading content, can be a string or React node */
    heading?: React.ReactNode;
    /** Heading tag, defaults to 'h4' */
    headingTag?: HeadingTag;
    /** Description text */
    description?: string;
    /** Format of the item, either 'action' or 'content' */
    format?: "action" | "content";
    /** Optional hyperlink URL */
    href?: string;
    /** Target attribute for the hyperlink */
    hrefTarget?: string;
    /** Click handler for the item */
    onClick?: () => void;
    /** Optional icon to be displayed */
    icon?: React.ReactNode;
    /** Shadow to be applied */
    shadow?: "raised";
}
/**
 * CardGridItem component renders an individual item within a grid.
 * It can be formatted as either an "action" or "content" item with optional loading states.
 *
 * @param {CardGridItemProps} props - The props for the CardGridItem component.
 * @returns {JSX.Element} The rendered CardGridItem component.
 */
export declare const CardGridItem: ({ button, heading, headingTag, description, format, href, hrefTarget, onClick, icon, shadow, ...gridItemProps }: CardGridItemProps) => JSX.Element;
/**
 * Interface for props used in the CardGrid component.
 * Extends BigDesign's GridProps.
 */
export interface CardGridProps extends GridProps {
    /** Array of items to be rendered within the grid */
    items?: CardGridItemProps[];
    /** Format of all grid items, either 'content' or 'action' */
    format?: "content" | "action";
    /** Shadow to be applied. When "raised", items will be displayed in a grid with gaps. When not set, items will be stacked. */
    shadow?: "raised";
}
/**
 * CardGrid component renders a grid of items, each formatted as either 'action' or 'content'.
 * It also manages default grid settings for columns and gaps.
 *
 * @param {CardGridProps} props - The props for the CardGrid component.
 * @returns {JSX.Element} The rendered CardGrid component.
 */
export declare const CardGrid: ({ items, format, shadow, ...gridProps }: CardGridProps) => JSX.Element;
/**
 * Interface for props used in the AsideCardGrid component.
 * Extends CardGridProps.
 */
export interface AsideCardGridProps extends CardGridProps {
}
/**
 * AsideCardGrid component specifically designed for use within aside containers.
 * It uses a single column layout with appropriate styling.
 *
 * @param {AsideCardGridProps} props - The props for the AsideCardGrid component.
 * @returns {JSX.Element} The rendered AsideCardGrid component.
 */
export declare const AsideCardGrid: ({ items, format, shadow, ...gridProps }: AsideCardGridProps) => JSX.Element;