@activecollab/components/dist/esm/components/StackedCard/Primitives.d.ts

ActiveCollab Components

import React, { ReactElement, ReactNode } from "react";
import { StackedCardRowDirection, StackedCardRowRole } from "./constants";
/**
 * StackedCard layout primitives.
 *
 * A stacked card is a portrait presentation of data: content stacks top to
 * bottom in rows. There are three primitives and nothing else —
 *
 *  - StackedCardStack — the vertical column. A card IS a stack of rows; the
 *    primitive is exported for nested stacks (a row that stacks internally).
 *  - StackedCardRow   — the one layout primitive. Cover, title, meta, footer
 *    are all rows; a `role` sets the default padding so the anatomy stays
 *    predictable across every card type.
 *  - StackedCardCover — sugar for a bleed row that holds media, reserves its
 *    height with `aspect-ratio` so a late image never reflows the card, and
 *    carries two control slots (center + top-right).
 */
/** A vertical flex column with no padding of its own. */
export declare const StackedCardStack: import("styled-components").StyledComponent<"div", any, {}, never>;
export interface IStackedCardRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
    /**
     * Named layout role → default padding. Defaults to `custom`.
     *
     * This shadows the DOM `role` attribute on purpose: a row is a layout
     * increment, and the concept's vocabulary for it is the role. Rows that need
     * an ARIA role should carry it on their own content.
     */
    role?: StackedCardRowRole;
    /** Zero the padding, overriding the role (media rows, edge-to-edge bands). */
    bleed?: boolean;
    /** Footer bands lay their children out vertically. Defaults to `row`. */
    direction?: StackedCardRowDirection;
    /** A row can carry its own background (a tinted footer band, a state tint). */
    background?: string;
    className?: string;
    children: ReactNode;
}
/**
 * One row of a card's stack.
 *
 * In `row` direction the first level of children is distributed evenly along
 * the X axis; a child carrying the `data-fixed` attribute keeps its own width
 * and the rest share what remains.
 */
export declare const StackedCardRow: React.ForwardRefExoticComponent<IStackedCardRowProps & React.RefAttributes<HTMLDivElement>>;
export interface IStackedCardCoverProps {
    /**
     * CSS `aspect-ratio` value that reserves the cover's height, e.g.
     * `"260 / 132"`. A ratio, not a pixel height, so the cover scales with the
     * card and holds its space before the media loads.
     */
    aspectRatio?: string;
    /** Center slot — the media control (a play button over audio/video). */
    centerSlot?: ReactNode;
    /** Top-right slot — cover management (collapse, remove). */
    topRightSlot?: ReactNode;
    /**
     * Render the thin collapsed strip instead of the media box. The collapse
     * CONTROL lives in the caller's `topRightSlot`; this flag is the resulting
     * visual state.
     */
    collapsed?: boolean;
    /**
     * What the collapsed strip shows — an ~8px colour bar, a favicon + domain
     * row. Content-specific, so the caller supplies it.
     */
    collapsedStrip?: ReactNode;
    /** Fired when the collapsed strip's expand affordance is activated. */
    onExpand?: () => void;
    /** Accessible label for the expand affordance. */
    expandLabel?: string;
    className?: string;
    /** The fill: an `<img>`, an inline `<svg>`, or a solid-colour box. */
    children: ReactNode;
}
/**
 * A bleed row that holds media.
 *
 * Controls in either slot are revealed on hover OR focus-within, so they stay
 * reachable by keyboard. Collapsed, the media box gives way to a strip that is
 * itself the expand button.
 */
export declare const StackedCardCover: {
    ({ aspectRatio, centerSlot, topRightSlot, collapsed, collapsedStrip, onExpand, expandLabel, className, children, }: IStackedCardCoverProps): ReactElement;
    displayName: string;
};
/** Centered media control (a play button). Drop the glyph inside. */
export declare const StackedCardPlayBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
/** Top-right cover-management button (collapse, remove …). */
export declare const StackedCardCoverButton: import("styled-components").StyledComponent<"button", any, {}, never>;
//# sourceMappingURL=Primitives.d.ts.map