@furystack/shades-common-components/esm/components/card.d.ts

Common UI components for FuryStack Shades

import type { PartialElement } from '@furystack/shades';
/**
 * Props for the Card component.
 */
export type CardProps = PartialElement<HTMLElement> & {
    /** Shadow elevation level. Ignored when variant is 'outlined'. */
    elevation?: 0 | 1 | 2 | 3;
    /** Visual variant of the card */
    variant?: 'elevation' | 'outlined';
    /** Whether the card is interactive (shows hover effects) */
    clickable?: boolean;
};
/**
 * A versatile surface component for grouping related content and actions.
 * Supports elevation and outlined variants with optional hover interactions.
 *
 * Compose with CardHeader, CardContent, CardMedia, and CardActions for structured layouts.
 */
export declare const Card: (props: Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
} & {
    /** Shadow elevation level. Ignored when variant is 'outlined'. */
    elevation?: 0 | 1 | 2 | 3;
    /** Visual variant of the card */
    variant?: "elevation" | "outlined";
    /** Whether the card is interactive (shows hover effects) */
    clickable?: boolean;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
/**
 * Props for the CardHeader component.
 */
export type CardHeaderProps = PartialElement<HTMLElement> & {
    /** Title text displayed in the header */
    title: string;
    /** Optional secondary text below the title */
    subheader?: string;
    /** Optional element rendered on the left (e.g. Avatar) */
    avatar?: JSX.Element;
    /** Optional element rendered on the right (e.g. icon button) */
    action?: JSX.Element;
};
/**
 * Displays a title, optional subheader, avatar, and action area at the top of a Card.
 */
export declare const CardHeader: (props: Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
} & {
    /** Title text displayed in the header */
    title: string;
    /** Optional secondary text below the title */
    subheader?: string;
    /** Optional element rendered on the left (e.g. Avatar) */
    avatar?: JSX.Element;
    /** Optional element rendered on the right (e.g. icon button) */
    action?: JSX.Element;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
/**
 * Props for the CardContent component.
 */
export type CardContentProps = PartialElement<HTMLElement>;
/**
 * Provides padded content area within a Card.
 */
export declare const CardContent: (props: Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
/**
 * Props for the CardMedia component.
 */
export type CardMediaProps = PartialElement<HTMLElement> & {
    /** URL of the image to display */
    image: string;
    /** Accessible alt text for the image */
    alt?: string;
    /** Fixed height for the media area */
    height?: string;
};
/**
 * Displays an image or media element within a Card.
 */
export declare const CardMedia: (props: Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
} & {
    /** URL of the image to display */
    image: string;
    /** Accessible alt text for the image */
    alt?: string;
    /** Fixed height for the media area */
    height?: string;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
/**
 * Props for the CardActions component.
 */
export type CardActionsProps = PartialElement<HTMLElement> & {
    /** Align actions at the end instead of the start */
    disableSpacing?: boolean;
};
/**
 * Provides a row of actions (buttons, links) at the bottom of a Card.
 */
export declare const CardActions: (props: Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
} & {
    /** Align actions at the end instead of the start */
    disableSpacing?: boolean;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
//# sourceMappingURL=card.d.ts.map