@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 { LinkProps, HeadingProps, TextProps } from '../../';
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 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';
} & BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>;
export declare const defaultRiverImageTextRatio = "50:50";
export declare const defaultRiverAlign = "start";
export type RiverContentProps = BaseProps<HTMLDivElement> & {
    /**
     * 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 type RiverVisualProps = 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;
}>;
/**
 * Alternating text and image pairs.
 */
export declare const River: React.ForwardRefExoticComponent<Omit<RiverProps, "ref"> & React.RefAttributes<HTMLElement>> & {
    Visual: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<RiverVisualProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
    Content: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
};