import React, { HTMLAttributes } from "react";
import type { AkselColor } from "../types";
import { LinkAnchorProps } from "../utils/components/link-anchor";
interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * @default true
     */
    arrow?: boolean;
    /**
     * Adjusts arrow position.
     * @default "baseline"
     */
    arrowPosition?: "baseline" | "center";
    /**
     * Changes padding and typo sizes.
     * @default "medium"
     */
    size?: "small" | "medium";
    /**
     * Overrides inherited color.
     *
     * We reccomend avoiding status-colors (`info`, `success`, `warning`, `danger`) in LinkCards.
     * @see 🏷️ {@link AkselColor}
     * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
     */
    "data-color"?: AkselColor;
    /**
     * Changes the HTML element used for the root element.
     *
     * **When using `section`, provide either `aria-label` or `aria-labelledby` for better accessibility.**
     * `axe-core` might warn about unique landmarks if you have multiple Accordions on page with the same label.
     * In those cases consider updating to unique `aria-label` or `aria-labelledby` props.
     * @see [📝 Landmarks unique](https://dequeuniversity.com/rules/axe/4.6/landmark-unique)
     *
     *
     * **When using `article`, make sure `<LinkCard.Title />` is a heading and not a `span`.**
     * @default "div"
     */
    as?: "div" | "section" | "article";
}
interface LinkCardComponent extends React.ForwardRefExoticComponent<LinkCardProps & React.RefAttributes<HTMLDivElement>> {
    /**
     * @see 🏷️ {@link LinkCardTitleProps}
     */
    Title: typeof LinkCardTitle;
    /**
     * @see 🏷️ {@link LinkCardAnchorProps}
     */
    Anchor: typeof LinkCardAnchor;
    /**
     * @see 🏷️ {@link LinkCardDescriptionProps}
     */
    Description: typeof LinkCardDescription;
    /**
     * @see 🏷️ {@link LinkCardFooterProps}
     */
    Footer: typeof LinkCardFooter;
    /**
     * @see 🏷️ {@link LinkCardIconProps}
     */
    Icon: typeof LinkCardIcon;
    /**
     * @see 🏷️ {@link LinkCardImageProps}
     */
    Image: typeof LinkCardImage;
}
/**
 * Accessible clickable card as a link.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/linkcard)
 * @see 🏷️ {@link LinkCardProps}
 *
 *
 * @example
 * ```tsx
 * <LinkCard>
 *   <LinkCard.Icon>
 *     <IconOrPictogram />
 *   </LinkCard.Icon>
 *   <LinkCard.Title>
 *     <LinkCard.Anchor href="/href">
 *       LinkCard title
 *     </LinkCard.Anchor>
 *   </LinkCard.Title>
 *   <LinkCard.Description>
 *     This is a description of the link card.
 *   </LinkCard.Description>
 *   <LinkCard.Footer>Footer content</LinkCard.Footer>
 * </LinkCard>
 * ```
 */
export declare const LinkCard: LinkCardComponent;
type LinkCardTitleProps = HTMLAttributes<HTMLHeadingElement> & {
    children: React.ReactNode;
    /**
     * Heading tag. Use "span" if you want a non header defining card
     * (eg. you have a lot of them all at once, such as in a grid)
     * @default "span"
     */
    as?: "span" | "h2" | "h3" | "h4" | "h5" | "h6";
};
/**
 * @see 🏷️ {@link LinkCardTitleProps}
 */
export declare const LinkCardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & {
    children: React.ReactNode;
    /**
     * Heading tag. Use "span" if you want a non header defining card
     * (eg. you have a lot of them all at once, such as in a grid)
     * @default "span"
     */
    as?: "span" | "h2" | "h3" | "h4" | "h5" | "h6";
} & React.RefAttributes<HTMLHeadingElement>>;
type LinkCardAnchorProps = LinkAnchorProps;
/**
 * @see 🏷️ {@link LinkCardAnchorProps}
 */
export declare const LinkCardAnchor: React.ForwardRefExoticComponent<LinkAnchorProps & React.RefAttributes<HTMLAnchorElement>>;
interface LinkCardDescriptionProps extends HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
}
/**
 * @see 🏷️ {@link LinkCardDescriptionProps}
 */
export declare const LinkCardDescription: React.ForwardRefExoticComponent<LinkCardDescriptionProps & React.RefAttributes<HTMLDivElement>>;
interface LinkCardFooterProps extends HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
}
/**
 * @see 🏷️ {@link LinkCardFooterProps}
 */
export declare const LinkCardFooter: React.ForwardRefExoticComponent<LinkCardFooterProps & React.RefAttributes<HTMLDivElement>>;
interface LinkCardIconProps extends HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
}
/**
 * @see 🏷️ {@link LinkCardIconProps}
 */
export declare const LinkCardIcon: React.ForwardRefExoticComponent<LinkCardIconProps & React.RefAttributes<HTMLDivElement>>;
type ImageAspectRatio = "1/1" | "16/9" | "16/10" | "4/3" | (string & {});
interface LinkCardImageProps extends HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
    /**
     * The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box.
     * This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio.
     */
    aspectRatio?: ImageAspectRatio;
}
/**
 * @see 🏷️ {@link LinkCardImageProps}
 */
export declare const LinkCardImage: React.ForwardRefExoticComponent<LinkCardImageProps & React.RefAttributes<HTMLDivElement>>;
export type { LinkCardAnchorProps, LinkCardDescriptionProps, LinkCardFooterProps, LinkCardIconProps, LinkCardImageProps, LinkCardProps, LinkCardTitleProps, };