@postenbring/hedwig-react/dist/card/card.d.ts

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

import type { ReactNode } from "react";
import { forwardRef } from "react";
export declare const CardMedia: import("react").ForwardRefExoticComponent<CardBaseProps & import("react").RefAttributes<HTMLDivElement>>;
export interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {
    /**
     * Change the default rendered element for the one passed as a child, merging their props and behavior.
     *
     * @default false
     */
    asChild?: boolean;
    /**
     * Define image scaling behavior when the image are varies in both width and height across different page breaks and  sizes of the card.
     * "crop": Image always fills the available space.
     *         If the aspect ratio doesn't match, then the top/bottom or left/right edges are cropped away.
     * "scale": No cropping, image scales to the maximum size available and centers.
     *          If the aspect ratio doesn't match, then the background will show on the top/bottom or left/right sides of the image.
     *
     * @default "scale"
     */
    variant?: "crop" | "scale";
}
export declare const CardMediaImg: import("react").ForwardRefExoticComponent<CardImageMediaProps & import("react").RefAttributes<HTMLImageElement>>;
export declare const CardBody: import("react").ForwardRefExoticComponent<CardBaseProps & import("react").RefAttributes<HTMLDivElement>>;
export declare const CardBodyHeader: import("react").ForwardRefExoticComponent<(CardBaseProps & ({
    /**
     * Heading level of the card heading
     */
    as: "h2" | "h3" | "h4" | "h5" | "h6";
    asChild?: never;
} | {
    asChild: true;
    as?: never;
})) & import("react").RefAttributes<HTMLHeadingElement>>;
export declare const CardBodyHeaderOverline: import("react").ForwardRefExoticComponent<CardBaseProps & import("react").RefAttributes<HTMLDivElement>>;
export declare const CardBodyHeaderTitle: import("react").ForwardRefExoticComponent<CardBaseProps & import("react").RefAttributes<HTMLDivElement>>;
export declare const CardBodyDescription: import("react").ForwardRefExoticComponent<CardBaseProps & import("react").RefAttributes<HTMLParagraphElement>>;
export declare const CardBodyAction: import("react").ForwardRefExoticComponent<CardBaseProps & import("react").RefAttributes<HTMLDivElement>>;
export declare const CardBodyActionRow: import("react").ForwardRefExoticComponent<CardBaseProps & import("react").RefAttributes<HTMLDivElement>>;
interface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {
    /**
     * Change the default rendered element for the one passed as a child, merging their props and behavior.
     *
     * @default false
     */
    asChild?: boolean;
    /**
     * Set direction of the arrow
     *
     * @default "right"
     */
    direction?: "right" | "up-right";
}
export declare const CardBodyActionArrow: import("react").ForwardRefExoticComponent<CardBodyActionArrowProps & import("react").RefAttributes<HTMLSpanElement>>;
export interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {
    children: ReactNode;
    /**
     * Change the default rendered element for the one passed as a child, merging their props and behavior.
     *
     * @default false
     */
    asChild?: boolean;
}
/**
 * @deprecated This interface is deprecated and will be removed in a future release.
 * Use `CardSlimAndMiniatureProps` with props `data-color` and `theme` instead.
 */
export interface CardSlimAndMiniaturePropsDeprecated extends CardBaseProps {
    /**
     * Change the default rendered element for Card.
     */
    as?: "section" | "div" | "article" | "aside";
    /**
     * Allows for a horizontal variant for sizes above small.
     *
     * @default "slim"
     */
    variant?: "slim" | "miniature";
    "data-color"?: never;
    theme?: never;
    /**
     * @deprecated
     * Use props `data-color` and `theme` instead.
     * These colors will be removed in a future release.
     */
    color?: "white" | "lighter-brand" | "light-grey-fill";
    imagePosition?: never;
}
export interface CardSlimAndMiniatureProps extends CardBaseProps {
    /**
     * Change the default rendered element for Card.
     */
    as?: "section" | "div" | "article" | "aside";
    /**
     * Allows for a horizontal variant for sizes above small.
     *
     * @default "slim"
     */
    variant?: "slim" | "miniature";
    /**
     * Set theme for card
     * @default "default"
     */
    theme?: "default" | "tinted" | "base";
    /**
     * Set data-color for card.
     */
    "data-color"?: "neutral" | "posten" | "bring";
    imagePosition?: never;
}
/**
 * @deprecated Use Full-width card instead
 */
export interface CardFocusProps extends CardBaseProps {
    /**
     * Change the default rendered element for Card.
     */
    as?: "section" | "div" | "article" | "aside";
    /** @deprecated Use Full-width card instead */
    variant: "focus";
    /**
     * @deprecated
     * Use props `data-color` and `theme` instead.
     * The color prop will be removed in a future release.
     */
    color?: "darker" | "dark";
    "data-color"?: never;
    theme?: never;
    /**
     * fullwidth or focus cards can have images to the left or right of the text.
     *
     * @default "left"
     * */
    imagePosition?: "left" | "right";
}
/**
 * @deprecated This interface is deprecated and will be removed in a future release.
 * Use `CardSlimAndMiniatureProps` with props `data-color` and `theme` instead.
 */
export interface CardFullwidthPropsDeprecated extends CardBaseProps {
    /**
     * Change the default rendered element for Card.
     */
    as?: "section" | "div" | "article" | "aside";
    variant: "full-width";
    "data-color"?: never;
    theme?: never;
    /**
     * @deprecated
     * Use `data-color` and `theme` instead.
     * The color prop will be removed in a future release.
     */
    color: "white" | "lighter-brand" | "light-grey-fill";
    /**
     * fullwidth or focus cards can have images to the left or right of the text.
     *
     * @default "left"
     * */
    imagePosition?: "left" | "right";
}
export interface CardFullwidthProps extends CardBaseProps {
    /**
     * Change the default rendered element for Card.
     */
    as?: "section" | "div" | "article" | "aside";
    variant: "full-width";
    /**
     * Set theme for card
     * @default "default"
     */
    theme?: "default" | "tinted" | "base";
    /**
     * Set data-color for card.
     */
    "data-color"?: "neutral" | "posten" | "bring";
    /**
     * fullwidth or focus cards can have images to the left or right of the text.
     *
     * @default "left"
     * */
    imagePosition?: "left" | "right";
}
export type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps | CardSlimAndMiniaturePropsDeprecated | CardFullwidthPropsDeprecated;
export declare const Card: CardType;
type CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {
    Media: typeof CardMedia;
    MediaImg: typeof CardMediaImg;
    Body: typeof CardBody;
    BodyHeader: typeof CardBodyHeader;
    BodyHeaderOverline: typeof CardBodyHeaderOverline;
    BodyHeaderTitle: typeof CardBodyHeaderTitle;
    BodyDescription: typeof CardBodyDescription;
    BodyAction: typeof CardBodyAction;
    BodyActionRow: typeof CardBodyActionRow;
    BodyActionArrow: typeof CardBodyActionArrow;
};
export {};
//# sourceMappingURL=card.d.ts.map