@primer/react-brand 0.67.0-rc.f47a3983 → 0.68.0-rc.0198e801

package/lib/Bento/Bento.d.ts

@@ -45,6 +45,11 @@ type BentoVisualProps = {
     position?: string;
     padding?: Padding | ResponsivePadding;
 } & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
+/**
+ * Use Bento to present content in a responsive grid layout.
+ * @deprecated Bento is deprecated and will be removed in a future release. Use CTABanner or River instead.
+ * @see https://primer.style/brand/components/Bento
+ */
 export declare const Bento: (({ className, ...rest }: BentoProps) => import("react/jsx-runtime").JSX.Element) & {
     Item: ({ className, columnStart, columnSpan, rowStart, rowSpan, flow, colorMode, visualAsBackground, order, bgColor, children, ...rest }: BentoItemProps) => import("react/jsx-runtime").JSX.Element;
     Visual: ({ horizontalAlign, verticalAlign, fillMedia, overflow, position, padding, className, children, ...rest }: BentoVisualProps) => import("react/jsx-runtime").JSX.Element;

package/lib/CTABanner/CTABanner.d.ts

@@ -6,6 +6,7 @@ import { TextProps } from '../Text';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css';
+import { type LinkProps } from '../Link';
 export declare const CTABannerBackgroundColors: readonly ["default", "subtle"];
 type ResponsiveMap<T> = {
     narrow?: T;
@@ -80,14 +81,19 @@ type CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {
 type CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLParagraphElement> & {
     variant?: TextProps['variant'];
 };
-type CTABannerImageProps = BaseProps<HTMLImageElement> & {
+type CTABannerImageProps = BaseProps<HTMLImageElement> & Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> & {
     src: string;
     alt: string;
 };
+type CTABannerLogoProps = BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+};
 export declare const CTABanner: React.ForwardRefExoticComponent<Omit<CTABannerProps, "ref"> & React.RefAttributes<HTMLElement>> & {
     Heading: React.ForwardRefExoticComponent<Omit<CTABannerHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Omit<CTABannerDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     ButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<import("..").ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Image: React.ForwardRefExoticComponent<Omit<CTABannerImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+    Logo: React.ForwardRefExoticComponent<Omit<CTABannerLogoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Link: ({ className, children, variant, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/lib/Card/Card.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HeadingProps, type ImageProps, LabelColors } from '..';
+import { HeadingProps, type ImageProps } from '..';
 import { type IconProps } from '../Icon';
 import type { BaseProps } from '../component-helpers';
 /**
@@ -7,19 +7,32 @@ import type { BaseProps } from '../component-helpers';
  */
 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';
-export declare const CardVariants: readonly ["default", "minimal", "torchlight"];
+export declare const CardVariants: readonly ["default", "minimal"];
+export declare const CardCTAVariants: readonly ["text", "arrow", "none"];
+export declare const CardBackgroundColors: readonly ["default", "subtle", "none"];
+export declare const CardTokenPositions: readonly ["block-start", "block-end"];
+export declare const CardLabelVariants: readonly ["token", "accent-text"];
 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 declare const defaultCardCTAVariant: "text";
+export declare const defaultCardLabelVariant: "token";
 export type CardVariants = (typeof CardVariants)[number];
+export type CardCTAVariant = (typeof CardCTAVariants)[number];
+export type CardTokenPosition = (typeof CardTokenPositions)[number];
+export type CardLabelVariant = (typeof CardLabelVariants)[number];
+export type CardBackgroundColor = (typeof CardBackgroundColors)[number];
+type CardLeadingVisual = React.ReactElement | React.ComponentType<{
+    className?: string;
+}>;
 export type CardProps = {
     /**
      * Specify alternative card appearance
      */
     variant?: CardVariants;
     /**
-     * Valid children include Card.Image, Card.Heading, and Card.Description
+     * Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description
      */
-    children: React.ReactNode | React.ReactElement<CardImageProps> | React.ReactElement<CardIconProps> | React.ReactElement<CardLabelProps> | React.ReactElement<CardHeadingProps> | React.ReactElement<CardDescriptionProps>;
+    children: React.ReactNode | React.ReactElement<CardImageProps> | React.ReactElement<CardIconProps> | React.ReactElement<CardLabelProps> | React.ReactElement<CardTokensProps> | React.ReactElement<CardHeadingProps> | React.ReactElement<CardDescriptionProps>;
     /**
      * Disable the default hover animation
      */
@@ -32,6 +45,21 @@ export type CardProps = {
      * Changes the cta text of the card
      * */
     ctaText?: string;
+    /**
+     * Specifies the presentation of the call-to-action area
+     */
+    ctaVariant?: CardCTAVariant;
+    /**
+     * Optional, custom background color.
+     */
+    backgroundColor?: CardBackgroundColor;
+    /**
+     * A visual that appears before the heading, commonly used for a logo or brand mark
+     */
+    leadingVisual?: CardLeadingVisual;
+    /**
+     * Adds a border to the card.
+     */
     hasBorder?: boolean;
     /**
      * Fills the width of the parent container and removes the default max-width.
@@ -47,9 +75,13 @@ type CardImageProps = {
 } & ImageProps;
 declare function CardImage({ className, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
 type CardIconProps = IconProps;
-type CardLabelProps = BaseProps<HTMLSpanElement> & {
+type CardTokensProps = BaseProps<HTMLDivElement> & {
+    children: React.ReactNode | React.ReactNode[];
+    position?: CardTokenPosition;
+};
+type CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
     children: React.ReactNode | React.ReactNode[];
-    color?: (typeof LabelColors)[number];
+    variant?: CardLabelVariant;
 };
 type CardHeadingProps = BaseProps<HTMLHeadingElement> & {
     children: React.ReactNode | React.ReactNode[];
@@ -65,8 +97,9 @@ type CardDescriptionProps = BaseProps<HTMLParagraphElement> & {
  */
 export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Image: typeof CardImage;
+    Icon: ({ className, hasBackground, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
     Label: React.ForwardRefExoticComponent<Omit<CardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-    Icon: ({ className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    Tokens: React.ForwardRefExoticComponent<Omit<CardTokensProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Heading: React.ForwardRefExoticComponent<Omit<CardHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Omit<CardDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 };

package/lib/EyebrowText/EyebrowText.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import { type TextProps } from '../Text';
 import type { BaseProps } from '../component-helpers';
-export type EyebrowTextProps = Omit<TextProps, 'as' | 'animate'> & Omit<BaseProps<HTMLSpanElement>, 'animate'> & {
+export declare const EyebrowTextVariants: readonly ["default", "muted", "accent"];
+export type EyebrowTextVariant = (typeof EyebrowTextVariants)[number];
+export type EyebrowTextProps = Omit<TextProps, 'as' | 'animate' | 'variant'> & Omit<BaseProps<HTMLSpanElement>, 'animate'> & {
+    variant?: EyebrowTextVariant;
     ['data-testid']?: string;
 };
 /**

package/lib/Hero/Hero.d.ts

@@ -119,7 +119,7 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         as?: "button";
     } & {
         children?: React.ReactNode | undefined;
-    }, "ref">) & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+    }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     SecondaryAction: React.ForwardRefExoticComponent<(Omit<{
         as?: "a" | "button";
         href: string;
@@ -134,7 +134,7 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         as?: "button";
     } & {
         children?: React.ReactNode | undefined;
-    }, "ref">) & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+    }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     Image: React.ForwardRefExoticComponent<(Omit<{
         position?: import("./HeroContext").HeroMediaPositions;
         enableBorder?: boolean;

package/lib/Hero/HeroContext.d.ts

@@ -4,7 +4,7 @@ export type HeroAlign = (typeof HeroAlignOptions)[number];
 export declare const HeroVariantOptions: readonly ["default", "gridline", "gridline-expressive"];
 export type HeroVariant = (typeof HeroVariantOptions)[number];
 export declare const heroMediaPositions: readonly ["block-end", "block-end-padded", "inline-start", "inline-end", "inline-end-padded", "inline-start-padded"];
-export declare const heroMediaInlinePositions: ("inline-end" | "inline-start" | "block-end" | "block-end-padded" | "inline-end-padded" | "inline-start-padded")[];
+export declare const heroMediaInlinePositions: ("block-end" | "block-end-padded" | "inline-start" | "inline-end" | "inline-end-padded" | "inline-start-padded")[];
 export type HeroMediaPositions = (typeof heroMediaPositions)[number];
 export type HeroMediaInlinePositions = (typeof heroMediaInlinePositions)[number];
 type HeroContextType = {

package/lib/Hero/sub-components/HeroPrimaryAction.d.ts

@@ -24,5 +24,5 @@ export declare const HeroPrimaryAction: React.ForwardRefExoticComponent<(Omit<{
     as?: "button";
 } & {
     children?: React.ReactNode | undefined;
-}, "ref">) & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+}, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export {};

package/lib/Hero/sub-components/HeroSecondaryAction.d.ts

@@ -24,5 +24,5 @@ export declare const HeroSecondaryAction: React.ForwardRefExoticComponent<(Omit<
     as?: "button";
 } & {
     children?: React.ReactNode | undefined;
-}, "ref">) & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+}, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export {};

package/lib/Pillar/Pillar.d.ts

@@ -1,12 +1,10 @@
 import React, { PropsWithChildren, type JSX } from 'react';
 import { HeadingProps, type ImageProps, LinkProps } 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/pillar/colors-with-modes.css';
 export declare const PillarIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
-export declare const defaultPillarIconColor: "default";
+export declare const defaultPillarIconColor = "green";
+export declare const defaultPillarIconSize: "small";
 export type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<C> & {
     /**
      * The HTML element used to render the Pillar.
@@ -23,14 +21,16 @@ export type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.H
 } & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>);
 type PillarImageProps = ImageProps;
 declare function PillarImage({ className, ...rest }: PillarImageProps): import("react/jsx-runtime").JSX.Element;
-type IconComponent = React.ComponentType<{
+type IconComponentProps = React.SVGAttributes<SVGElement> & {
     size?: number;
-}>;
-type PillarIconProps = BaseProps<HTMLSpanElement> & {
-    icon: React.ReactNode | IconComponent;
+};
+type IconComponent = React.ComponentType<IconComponentProps> | React.ExoticComponent<IconComponentProps>;
+type IconElement = React.ReactElement<IconComponentProps>;
+export type PillarIconProps = Omit<IconProps, 'icon' | 'color'> & {
+    icon: IconElement | IconComponent;
     color?: (typeof PillarIconColors)[number];
 };
-declare function PillarIcon({ icon: Icon, className, color, ...rest }: PillarIconProps): import("react/jsx-runtime").JSX.Element;
+declare function PillarIcon({ icon, className, color, hasBackground, size, ...props }: PillarIconProps): import("react/jsx-runtime").JSX.Element;
 type PillarHeadingProps = BaseProps<HTMLHeadingElement> & {
     children: React.ReactNode | React.ReactNode[];
     as?: Exclude<HeadingProps['as'], 'h1'>;

package/lib/PricingOptions/PricingOptions.d.ts

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
 import type { ListItemProps } from '../list/ListItem/ListItem';
 import type { BaseProps } from '../component-helpers';
-import { ButtonBaseProps, HeadingProps, LabelProps } from '..';
+import { ButtonBaseProps, HeadingProps } from '..';
 /**
  * Design tokens
  */
@@ -12,7 +12,10 @@ export type PricingOptionsProps = {
     align?: AlignOptions;
     variant?: 'default' | 'default-gradient' | 'cards' | 'cards-gradient';
     ['data-testid']?: string;
-} & PropsWithChildren<BaseProps<HTMLDivElement>>;
+} & PropsWithChildren<BaseProps<HTMLDivElement>> & HTMLAttributes<HTMLDivElement>;
+type PricingOptionsLabelProps = PropsWithChildren<{
+    'data-testid'?: string;
+}>;
 export type PricingOptionsItem = {
     ['data-testid']?: string;
     /**
@@ -23,9 +26,6 @@ export type PricingOptionsItem = {
      */
     leadingComponent?: React.ReactElement;
 } & PropsWithChildren<BaseProps<HTMLDivElement>>;
-type PricingOptionsLabelProps = PropsWithChildren<BaseProps<HTMLSpanElement>> & {
-    'data-testid'?: string;
-} & LabelProps;
 type PricingOptionsDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {
     'data-testid'?: string;
 };
@@ -61,6 +61,7 @@ type PricingOptionsFeatureListGroupHeadingProps = PropsWithChildren<BaseProps<HT
 };
 type PricingOptionsFeatureListItemProps = PropsWithChildren<BaseProps<HTMLLIElement>> & {
     'data-testid'?: string;
+    infoTooltip?: string;
     variant?: 'included' | 'excluded';
 } & Omit<ListItemProps, 'variant'>;
 type AsA = {
@@ -73,6 +74,13 @@ type AsButton = {
     'data-testid'?: string;
 } & React.ButtonHTMLAttributes<BaseProps<HTMLButtonElement>> & ButtonBaseProps;
 type PricingOptionsActionsProps = AsA | AsButton;
+type PricingOptionsActionsMessageProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {
+    'data-testid'?: string;
+    leadingComponent?: React.ReactElement;
+};
+type PricingOptionsMenuActionProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {
+    'data-testid'?: string;
+};
 type PricingOptionsFootnoteProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {
     'data-testid'?: string;
 };
@@ -81,27 +89,32 @@ type PricingOptionsFootnoteProps = PropsWithChildren<BaseProps<HTMLParagraphElem
  * {@link https://primer.style/brand/components/PricingOptions/ See usage examples}.
  */
 export declare const PricingOptions: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<PricingOptionsProps>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    ActionsMessage: React.ForwardRefExoticComponent<Omit<PricingOptionsActionsMessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Description: React.ForwardRefExoticComponent<Omit<PricingOptionsDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     FeatureList: React.ForwardRefExoticComponent<Omit<PricingOptionsFeatureListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     FeatureListHeading: React.ForwardRefExoticComponent<Omit<PricingOptionsFeatureListHeadingProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     FeatureListGroupHeading: React.ForwardRefExoticComponent<Omit<PricingOptionsFeatureListGroupHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     FeatureListItem: React.ForwardRefExoticComponent<Omit<PricingOptionsFeatureListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
     Footnote: React.ForwardRefExoticComponent<Omit<PricingOptionsFootnoteProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Label: ({ children }: PricingOptionsLabelProps) => import("react/jsx-runtime").JSX.Element;
     Heading: React.ForwardRefExoticComponent<Omit<PricingOptionsHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Item: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<PricingOptionsItem>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Label: React.ForwardRefExoticComponent<Omit<PricingOptionsLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    MenuAction: React.ForwardRefExoticComponent<Omit<PricingOptionsMenuActionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Price: React.ForwardRefExoticComponent<Omit<PricingOptionsPriceProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-    PrimaryAction: React.ForwardRefExoticComponent<React.PropsWithChildren<PricingOptionsActionsProps> & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
-    SecondaryAction: React.ForwardRefExoticComponent<React.PropsWithChildren<PricingOptionsActionsProps> & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+    PrimaryAction: React.ForwardRefExoticComponent<React.PropsWithChildren<PricingOptionsActionsProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    SecondaryAction: React.ForwardRefExoticComponent<React.PropsWithChildren<PricingOptionsActionsProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     testIds: {
         root: string;
         item: string;
+        labelRow: string;
         heading: string;
         label: string;
         description: string;
         price: string;
+        actionsMessage: string;
         primaryAction: string;
         secondaryAction: string;
+        menuAction: string;
         featureList: string;
         featureListHeading: string;
         featureListItem: string;

package/lib/Token/Token.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css';
+export declare const TokenVariants: readonly ["default", "accent", "outline", "invisible"];
+export declare const defaultTokenVariant: "default";
+type TokenLeadingVisual = React.ReactElement | React.ComponentType<{
+    className?: string;
+}>;
+type TokenSharedProps = {
+    /**
+     * The leading visual appears before the Token content.
+     * Pass an element to supply custom props, or a component type that accepts an optional className.
+     */
+    leadingVisual?: TokenLeadingVisual;
+    /**
+     * The variant variations available in Token.
+     */
+    variant?: (typeof TokenVariants)[number];
+    /**
+     * The HTML element rendered by Token.
+     */
+    as?: 'span' | 'a';
+    ['data-testid']?: string;
+};
+type TokenSpanProps = BaseProps<HTMLSpanElement> & TokenSharedProps & {
+    as?: 'span';
+} & React.ComponentPropsWithoutRef<'span'>;
+type TokenAnchorProps = BaseProps<HTMLAnchorElement> & TokenSharedProps & {
+    as: 'a';
+    href: string;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
+export type TokenProps = TokenSpanProps | TokenAnchorProps;
+/**
+ * Use a Token to group short metadata or categories, with optional leading visuals.
+ * @see https://primer.style/brand
+ */
+export declare const Token: React.ForwardRefExoticComponent<(Omit<TokenSpanProps, "ref"> | Omit<TokenAnchorProps, "ref">) & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>> & {
+    testIds: {
+        root: string;
+        readonly leadingVisual: string;
+    };
+};
+export {};

package/lib/Token/index.d.ts

@@ -0,0 +1 @@
+export * from './Token';