@stratakit/structures/dist/Banner.d.ts

Medium-sized component structures for the Strata design system

import * as React from "react";
import { Icon } from "@stratakit/foundations";
import type { BaseProps } from "@stratakit/foundations/secret-internals";
interface BannerRootProps extends BaseProps<"div"> {
    /**
     * The tone of the banner.
     *
     * @default "neutral"
     */
    tone?: "neutral" | "info" | "positive" | "attention" | "critical";
    /**
     * The variant of the banner.
     *
     * @default "outline"
     */
    variant?: "outline";
}
/**
 * A banner to highlight information and also optionally provide actions.
 * The information could be very important (like a call to action) or reasonably import (like a status message).
 *
 * Example:
 * ```tsx
 * <Banner.Root tone="info" variant="outline">
 *   <Banner.Icon />
 *   <Banner.Label>Label</Banner.Label>
 *   <Banner.Message>Message</Banner.Message>
 *   <Banner.DismissButton onClick={onDismiss} />
 * </Banner.Root>
 * ```
 */
declare const BannerRoot: React.ForwardRefExoticComponent<BannerRootProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface BannerIconProps extends React.ComponentProps<typeof Icon> {
}
/**
 * A static icon decoration for the banner.
 *
 * - If no `href` is passed and the `tone` is `"neutral"`, no icon is shown.
 * - If no `href` is passed and the `tone` is not` "neutral"`, the status icon is shown.
 *
 * Example with default status icon:
 * ```tsx
 * <Banner.Root tone="info">
 *   <Banner.Icon />
 * </Banner.Root>
 *
 * Example with custom icon:
 * ```tsx
 * import placeholderIcon from "@stratakit/icons/placeholder.svg";
 *
 * <Banner.Root>
 *   <Banner.Icon href={placeholderIcon} />
 * </Banner.Root>
 * ```
 */
declare const BannerIcon: React.ForwardRefExoticComponent<Omit<BannerIconProps, "ref"> & React.RefAttributes<HTMLElement | SVGSVGElement>>;
interface BannerLabelProps extends BaseProps<"span"> {
}
/**
 * The label of the banner.
 *
 * Pass `render={<VisuallyHidden />}` if you don't want the label to be visible.
 *
 * Example:
 * ```tsx
 * <Banner.Root>
 *   <Banner.Label>Label</Banner.Label>
 * </Banner.Root>
 * ```
 *
 * Example with a visually hidden label:
 * ```tsx
 * <Banner.Root>
 *   <Banner.Label render={<VisuallyHidden />}>Label</Banner.Label>
 * </Banner.Root>
 * ```
 */
declare const BannerLabel: React.ForwardRefExoticComponent<BannerLabelProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
interface BannerMessageProps extends BaseProps<"div"> {
}
/**
 * The message content of the banner.
 *
 * Example:
 * ```tsx
 * <Banner.Root>
 *   <Banner.Message>Message content goes here.</Banner.Message>
 * </Banner.Root>
 * ```
 */
declare const BannerMessage: React.ForwardRefExoticComponent<BannerMessageProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
interface BannerActionsProps extends BaseProps<"div"> {
}
/**
 * The actions available for the banner.
 *
 * Example with one action:
 * ```tsx
 * <Banner.Root>
 *   <Banner.Actions>
 *     <Button key={…} onClick={…}>Action</Button>
 *   </Banner.Actions>
 * </Banner.Root>
 * ```
 *
 * Example with two `Button`s:
 * ```tsx
 * <Banner.Root>
 *   <Banner.Actions>
 *     <Button key={…} onClick={…}>Action 1</Button>
 *     <Button key={…} onClick={…}>Action 2</Button>
 *   </Banner.Actions>
 * </Banner.Root>
 * ```
 *
 * Example with two `Anchor`s as `Button`:
 * ```tsx
 * <Banner.Root>
 *   <Banner.Actions>
 *     <Anchor key={…} render={<button />} onClick={…}>Action 1</Anchor>,
 *     <Anchor key={…} render={<button />} onClick={…}>Action 2</Anchor>,
 *   </Banner.Actions>
 * </Banner.Root>
 * ```
 */
declare const BannerActions: React.ForwardRefExoticComponent<BannerActionsProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface BannerDismissButtonProps extends Omit<BaseProps<"button">, "children"> {
    /**
     * Label for the dismiss button.
     *
     * The final accessible name of the dismiss button is a combination of this `label` and the text content of `Banner.Label`.
     *
     * @default "Dismiss"
     */
    label?: string;
}
/**
 * Dismiss ("❌") button for the banner.
 * Handle the `onClick` callback to dismiss the banner.
 *
 * Example:
 * ```tsx
 * <Banner.Root>
 *   <Banner.DismissButton onClick={() => {}} />
 * </Banner.Root>
 * ```
 */
declare const BannerDismissButton: React.ForwardRefExoticComponent<BannerDismissButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
/**
 * A banner to highlight information and also optionally provide actions.
 * The information could be very important (like a call to action) or reasonably import (like a status message).
 *
 * Example:
 * ```tsx
 * <Banner label="Label" message="Message" icon={placeholderIcon} onDismiss={() => {}} />
 * ```
 */
declare const Banner: React.ForwardRefExoticComponent<Omit<BaseProps, "children"> & Pick<BannerRootProps, "tone" | "variant"> & {
    /**
     * A static icon decoration for the banner.
     *
     * Can be a URL of an SVG from the `@stratakit/icons` package, or a custom JSX icon.
     *
     * - If no `icon` is passed and the `tone` is `"neutral"`, no icon is shown.
     * - If no `icon` is passed and the `tone` is not `"neutral"`, the status icon is shown.
     */
    icon?: string | React.JSX.Element;
    /**
     * The label of the banner.
     *
     * Either pass a string or a `<VisuallyHidden>` component if you don't want the label to be visible.
     */
    label: string | React.JSX.Element;
    /**
     * The message content of the banner.
     */
    message: React.ReactNode;
    /**
     * Callback invoked when the dismiss ("❌") button is clicked.
     *
     * If `undefined`, the dismiss button will not be rendered.
     *
     * @default undefined
     */
    onDismiss?: () => void;
    /**
     * The actions available for the banner.
     *
     * Example with one action:
     * ```tsx
     * actions={<Button key={…} onClick={}>Action</Button>}
     * ```
     *
     * Example with two `Button`s:
     * ```tsx
     * actions={
     *   <>
     *     <Button key={…} onClick={…}>Action 1</Button>,
     *     <Button key={…} onClick={…}>Action 2</Button>,
     *   </>
     * }
     * ```
     *
     * Example with two `Anchor`s as `Button`:
     * ```tsx
     * actions={
     *   <>
     *     <Anchor key={…} render={<button />} onClick={…}>Action 1</Anchor>,
     *     <Anchor key={…} render={<button />} onClick={…}>Action 2</Anchor>,
     *   </>
     * }
     * ```
     */
    actions?: React.ReactNode;
} & React.RefAttributes<HTMLDivElement | HTMLElement>>;
export default Banner;
export { BannerRoot as Root, BannerIcon as Icon, BannerLabel as Label, BannerMessage as Message, BannerActions as Actions, BannerDismissButton as DismissButton, };