@primer/react-brand 0.41.1-rc.1ec6cc57 → 0.42.0-rc.17f3c648

package/lib/Bento/Bento.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
-import { Icon } from '@primer/octicons-react';
 import type { BaseProps } from '../component-helpers';
 import { HeadingProps, ColorMode as FullColorMode } from '../';
+import type { IconProps } from '../Icon';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css';
 type ColorMode = Exclude<FullColorMode, 'auto'>;
 export type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
@@ -29,7 +29,7 @@ type BentoItemProps = {
     bgColor?: 'default' | 'subtle';
 } & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
 type BentoContentProps = {
-    leadingVisual?: ReactElement | Icon;
+    leadingVisual?: ReactElement<IconProps>;
     padding?: Padding | ResponsivePadding;
     verticalAlign?: Align | ResponsiveAlign;
     horizontalAlign?: Exclude<Align, 'end'> | Partial<Record<Size, Exclude<Align, 'end'>>>;

package/lib/CTABanner/CTABanner.d.ts

@@ -1,23 +1,101 @@
 import React from 'react';
 import type { BaseProps } from '../component-helpers';
+import { TextProps } from '../Text';
 /**
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css';
+export declare const CTABannerBackgroundColors: readonly ["default", "subtle"];
+type ResponsiveMap<T> = {
+    narrow?: T;
+    regular?: T;
+    wide?: T;
+};
+type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
+type BackgroundColors = (typeof CTABannerBackgroundColors)[number] | AnyString;
+type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
+type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
+type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
 export type CTABannerProps = BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
-    children: React.ReactNode | React.ReactNode[];
+    /**
+     * The alignment of the content within the banner.
+     */
     align?: 'start' | 'center';
+    /**
+     * A flag to add a border to the banner.
+     */
     hasBorder?: boolean;
+    /**
+     * A flag to remove the shadow from the banner.
+     */
     hasShadow?: boolean;
+    /**
+     * A flag to remove the background from the banner.
+     */
     hasBackground?: boolean;
+    /**
+     * Optional, custom background color.
+     */
+    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
+    /**
+     * Optional, custom background image.
+     */
+    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap;
+    /**
+     * Optional, custom background position.
+     */
+    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap;
+    /**
+     * Optional, custom background size.
+     */
+    backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap;
+    /**
+     * 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;
 };
 export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
-    children: React.ReactNode | React.ReactNode[];
+    /**
+     * The alignment of the content within the banner.
+     */
     align?: "start" | "center";
+    /**
+     * A flag to add a border to the banner.
+     */
     hasBorder?: boolean;
+    /**
+     * A flag to remove the shadow from the banner.
+     */
     hasShadow?: boolean;
+    /**
+     * A flag to remove the background from the banner.
+     */
     hasBackground?: boolean;
+    /**
+     * Optional, custom background color.
+     */
+    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
+    /**
+     * Optional, custom background image.
+     */
+    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap;
+    /**
+     * Optional, custom background position.
+     */
+    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap;
+    /**
+     * Optional, custom background size.
+     */
+    backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap;
+    /**
+     * 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;
 }, "ref"> & React.RefAttributes<HTMLElement>> & {
     Heading: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLHeadingElement> & {
@@ -42,8 +120,8 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<H
         };
         font?: "mona-sans" | "hubot-sans" | "monospace";
     } & React.HTMLAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLParagraphElement> & {
-        children: React.ReactNode | React.ReactNode[];
+    Description: React.ForwardRefExoticComponent<Omit<React.HtmlHTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLParagraphElement> & {
+        variant?: TextProps["variant"];
     }, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     ButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<BaseProps<HTMLDivElement> & {
         children: React.ReactElement<import("..").ButtonProps<React.ElementType<"a" | "button">>, string | React.JSXElementConstructor<any>>[] | React.ReactElement<import("..").ButtonProps<React.ElementType<"a" | "button">>, string | React.JSXElementConstructor<any>>;
@@ -51,3 +129,4 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<H
         buttonsAs?: React.ElementType;
     }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
+export {};

package/lib/Card/Card.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
-import { HeadingProps } from '..';
-import { LabelColors } from '../Label';
-import { ImageProps } from '../Image';
+import { HeadingProps, type ImageProps, LabelColors } from '..';
+import { type IconProps } from '../Icon';
 import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css';
-import { Icon as IconProps } from '@primer/octicons-react';
 export declare const CardIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
 export declare const defaultCardIconColor: "default";
 export type CardProps = {
@@ -40,13 +38,7 @@ export type CardProps = {
 } & Omit<BaseProps<HTMLDivElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> & Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
 type CardImageProps = ImageProps;
 declare function CardImage({ className, ...rest }: CardImageProps): JSX.Element;
-type CardIconProps = BaseProps<HTMLSpanElement> & {
-    icon: React.ReactNode | IconProps;
-    color?: (typeof CardIconColors)[number];
-    hasBackground?: boolean;
-    ['aria-hidden']?: boolean;
-};
-declare function CardIcon({ 'aria-hidden': ariaHidden, icon: Icon, className, color, hasBackground, ...rest }: CardIconProps): JSX.Element;
+type CardIconProps = IconProps;
 type CardLabelProps = BaseProps<HTMLSpanElement> & {
     children: React.ReactNode | React.ReactNode[];
     color?: (typeof LabelColors)[number];
@@ -66,7 +58,7 @@ type CardDescriptionProps = BaseProps<HTMLParagraphElement> & {
 export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Image: typeof CardImage;
     Label: React.ForwardRefExoticComponent<Omit<CardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-    Icon: typeof CardIcon;
+    Icon: ({ className, ...props }: IconProps) => JSX.Element;
     Heading: React.ForwardRefExoticComponent<Omit<CardHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Omit<CardDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 };

package/lib/Icon/Icon.d.ts

@@ -1,6 +1,7 @@
-import { type SVGAttributes } from 'react';
+import React, { type SVGAttributes } from 'react';
 import { type Icon as OcticonProps } from '@primer/octicons-react';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon/colors.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon/colors-with-modes.css';
 export declare const namedIconSizes: readonly ["small", "medium", "large"];
 export type NamedIconSize = (typeof namedIconSizes)[number];
 export declare const numericIconSizes: readonly [20, 24, 28, 32, 36, 40, 44];
@@ -13,7 +14,7 @@ export declare const iconColors: readonly ["default", "blue", "coral", "green",
 export type IconColor = (typeof iconColors)[number];
 export declare const defaultIconColor: "default";
 export type IconProps = SVGAttributes<SVGElement> & {
-    icon: OcticonProps;
+    icon: OcticonProps | React.ReactElement<OcticonProps>;
     color?: IconColor;
     hasBackground?: boolean;
     size?: IconSize;