@primer/react-brand/lib/river/River/River.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React, { PropsWithChildren } from 'react';
import { type HeadingProps } from '../../Heading';
import { type TextProps } from '../../Text';
import { type LinkProps } from '../../Link';
import type { BaseProps } from '../../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css';
export declare const RiverVariants: readonly ["default", "gridline"];
export declare const BorderedGrid: "gridline";
export declare const GridLine: "gridline";
export type RiverVariant = (typeof RiverVariants)[number];
export declare const RiverContentAlignValues: readonly ["center", "block-end"];
export type RiverContentAlign = (typeof RiverContentAlignValues)[number];
export type RiverProps = {
    /**
     * Only specific children are valid.
     * These include: `River.Visual` and `River.Content`.
     * The declarative order of the children will be ignored in the rendered output
     * to enforce correct HTML semantics.
     */
    children: React.ReactElement<RiverVisualProps | RiverContentProps>[];
    /**
     * Apply an alternative image to text column ratio. The default is `50:50`.
     */
    imageTextRatio?: '60:40' | '50:50';
    /**
     * Adjust the order of the `Content` column. The default is `start`.
     */
    align?: 'start' | 'end' | 'center';
    /**
     * Apply a visual variant. The default is `default`.
     * `gridline` applies lateral spacing for use in bordered grid layouts.
     */
    variant?: RiverVariant;
} & BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>;
export declare const defaultRiverImageTextRatio = "50:50";
export declare const defaultRiverAlign = "start";
export declare const defaultRiverVariant: RiverVariant;
export type RiverContentProps = BaseProps<HTMLDivElement> & {
    /**
     * Aligns the content vertically within its container.
     */
    align?: RiverContentAlign;
    /**
     * Escape-hatch for inserting custom React components.
     * Warning:
     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
     */
    trailingComponent?: React.FunctionComponent;
    /**
     * When `true`, a divider will be rendered between the standard river and optional trailing content.
     */
    trailingComponentDivider?: boolean;
    /**
     * Escape-hatch for inserting custom React components.
     * Warning:
     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
     */
    leadingComponent?: React.FunctionComponent;
    /**
     * Only valid children are allowed.
     * These include: `Heading`, `Text` and `Link`.
     * The declarative order of the children will be ignored in the rendered output
     * to enforce correct HTML semantics.
     */
    children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
} & React.HTMLAttributes<HTMLDivElement>;
export declare const RiverContent: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
export declare const RiverVisualPositionOptions: readonly ["default", "center", "block-end", "block-end-inline-start", "block-end-inline-end"];
export type RiverVisualPosition = (typeof RiverVisualPositionOptions)[number];
export declare const RiverVisualPaddingOptions: readonly ["default", "none", "all"];
export type RiverVisualPadding = (typeof RiverVisualPaddingOptions)[number];
export type RiverVisualBaseProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement> & PropsWithChildren<{
    /**
     * Applies automatic size constraints to child images and video.
     * This can be disabled by setting this prop to `false`.
     */
    fillMedia?: boolean;
    /**
     * `img` and `video` elements will apply a shadow by default.
     * This can be disabled by setting this prop to `false`.
     */
    hasShadow?: boolean;
    /**
     * Enables rounded corners.
     * Can optionally be disabled.
     */
    rounded?: boolean;
}>;
export type RiverVisualProps = RiverVisualBaseProps & {
    /**
     * Positions media within the visual region in the gridline variant.
     */
    position?: RiverVisualPosition;
    /**
     * Controls media padding within the visual region in the gridline variant.
     */
    padding?: RiverVisualPadding;
};
export declare const RiverVisualBase: React.ForwardRefExoticComponent<Omit<RiverVisualBaseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Alternating text and image pairs.
 */
export declare const River: React.ForwardRefExoticComponent<Omit<RiverProps, "ref"> & React.RefAttributes<HTMLElement>> & {
    Visual: React.ForwardRefExoticComponent<Omit<RiverVisualProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
    Content: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
};