@activecollab/components/dist/esm/presentation/stackedCard/content/shared.d.ts

ActiveCollab Components

import React, { ReactElement, ReactNode } from "react";
/**
 * Content-level chrome shared by the typed StackedCard components.
 *
 * These live OUTSIDE the shell on purpose. The shell is hollow; the "…" entity
 * menu, the cover-management controls, the clamp, the favicon, the chips and
 * the placeholder frame are content concerns, so they belong here where the
 * typed cards (TaskCard, LinkCard, …) compose them.
 *
 * The card itself — the shell, the Stack/StackRow/Cover primitives and the
 * cover chrome — is the shipped design-system component,
 * `components/StackedCard`. These stories import it under the concept
 * vocabulary (Cover, StackRow, …) so the spec prose and the code keep using
 * the same words.
 */
/**
 * There is no global CSS reset in this Storybook, so a raw element (a `<span>`
 * holding a date, a `<button>` holding a word) falls back to the browser default
 * — a SERIF face at the UA's own size. Anything that is not a DS `Typography`
 * has to name the font itself. Use a DS Typography where one fits; use this
 * where the app itself sets the size in CSS (the column card's date row is a
 * plain `div` in `view.project_tasks_column_mode.less`, not a Typography).
 */
export declare const CARD_FONT = "-apple-system, BlinkMacSystemFont, \"Roboto\",\n  \"Helvetica Neue\", Arial, sans-serif";
/**
 * The design system ships one default cover ratio
 * (`STACKED_CARD_COVER_RATIO`). How tall a cover reads is a decision of the
 * content type, so the variants live here with the content: a link hero, a
 * full-bleed image, a colour swatch band.
 */
export declare const COVER_RATIO_HERO = "320 / 190";
export declare const COVER_RATIO_IMAGE = "260 / 168";
export declare const COVER_RATIO_SWATCH = "260 / 104";
/** Centered media control (play), for a cover that wraps audio/video. */
export declare const playControl: React.JSX.Element;
/**
 * Top-right cover management. Acts on the COVER (collapse it, remove it) — not
 * on the entity. Callers wire the click handlers; the default is inert chrome
 * for the static demos.
 */
export declare const coverManagement: ({ removeLabel, onCollapse, onRemove, }?: {
    removeLabel?: string;
    onCollapse?: () => void;
    onRemove?: () => void;
}) => ReactElement;
export declare const EntityDots: (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => ReactElement;
/** Two-line title clamp — the card's name row content. */
export declare const StyledClamp: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../../..").IBodyProps & Omit<import("../../../components/Typography/Typography").ITypographyProps, "variant" | "weight"> & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
/**
 * The title block — everything the title row stacks to the LEFT of the "…"
 * menu. A card that only has a title puts the clamp straight in the row; a card
 * that puts a line above or below it (the project a task belongs to, the client
 * a project is for) stacks them here so the row keeps its two-child shape:
 * text block, then the fixed-width menu.
 */
export declare const StyledTitleBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
/**
 * The project a card's entity lives in, above the title.
 *
 * On a canvas a task card has lost the column that used to say which project it
 * came from, so the card says it itself. One line, one treatment, shared by
 * every content type that can carry it (the whiteboard's own task face already
 * wrote it this way: `Caption 2` tertiary, tight above the title, ellipsis on
 * overflow — a project name is a reference, never a second title).
 */
export declare const StyledProjectLine: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../../..").ICaptionProps & Omit<import("../../../components/Typography/Typography").ITypographyProps, "variant" | "weight"> & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
export declare const CardProjectLine: ({ children, }: {
    children: ReactNode;
}) => ReactElement;
/** A favicon square — a solid data colour stands in for the real favicon. */
export declare const StyledFavicon: import("styled-components").StyledComponent<"span", any, {
    $bg: string;
}, never>;
/** A small pill for link metadata (media kind, duration, …). */
export declare const StyledChip: import("styled-components").StyledComponent<"span", any, {}, never>;
/** A solid-colour cover fill (swatch value, generic link cover, image stand-in). */
export declare const StyledColorCover: import("styled-components").StyledComponent<"div", any, {
    $color: string;
}, never>;
/**
 * The shared placeholder frame. Each type supplies its own icon and verb-first,
 * sentence-case invitation (ActiveCollab voice). Interactive by design — the
 * whole frame is a button — and distinct from the loading skeleton.
 */
export declare const Placeholder: ({ icon, label, height, dashed, ...rest }: {
    icon: ReactNode;
    label: ReactNode;
    height?: number;
    dashed?: boolean;
} & React.ButtonHTMLAttributes<HTMLButtonElement>) => ReactElement;
//# sourceMappingURL=shared.d.ts.map