@primer/react-brand 0.66.1-rc.612823df → 0.67.0-rc.197d7044

package/lib/Card/Card.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { HeadingProps, type ImageProps, LabelColors } from '..';
+import { HeadingProps, type ImageProps } from '..';
+import { type EyebrowTextProps } from '../EyebrowText';
 import { type IconProps } from '../Icon';
 import type { BaseProps } from '../component-helpers';
 /**
@@ -7,19 +8,30 @@ 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 CardTokenPositions: readonly ["block-start", "block-end"];
+export declare const CardLabelVariants: readonly ["default", "muted", "accent"];
 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: "muted";
 export type CardVariants = (typeof CardVariants)[number];
+export type CardCTAVariant = (typeof CardCTAVariants)[number];
+export type CardTokenPosition = (typeof CardTokenPositions)[number];
+export type CardLabelVariant = (typeof CardLabelVariants)[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 +44,17 @@ export type CardProps = {
      * Changes the cta text of the card
      * */
     ctaText?: string;
+    /**
+     * Specifies the presentation of the call-to-action area
+     */
+    ctaVariant?: CardCTAVariant;
+    /**
+     * 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 +70,12 @@ 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 = EyebrowTextProps & {
     children: React.ReactNode | React.ReactNode[];
-    color?: (typeof LabelColors)[number];
 };
 type CardHeadingProps = BaseProps<HTMLHeadingElement> & {
     children: React.ReactNode | React.ReactNode[];
@@ -65,8 +91,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,8 +1,12 @@
 import React from 'react';
+import { type TextProps } from '../Text';
 import type { BaseProps } from '../component-helpers';
-export type EyebrowTextProps = BaseProps<HTMLSpanElement> & {
+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;
-} & React.ComponentPropsWithoutRef<'span'>;
+};
 /**
  * EyebrowText is a simple text component that should be used above Headings.
  */

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,9 @@ type AsButton = {
     'data-testid'?: string;
 } & React.ButtonHTMLAttributes<BaseProps<HTMLButtonElement>> & ButtonBaseProps;
 type PricingOptionsActionsProps = AsA | AsButton;
+type PricingOptionsMenuActionProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {
+    'data-testid'?: string;
+};
 type PricingOptionsFootnoteProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {
     'data-testid'?: string;
 };
@@ -87,21 +91,24 @@ export declare const PricingOptions: React.ForwardRefExoticComponent<Omit<React.
     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<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;
         primaryAction: string;
         secondaryAction: string;
+        menuAction: string;
         featureList: string;
         featureListHeading: string;
         featureListItem: string;

package/lib/SectionIntro/SectionIntro.d.ts

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { LinkProps } from '../Link';
 import { HeadingProps } from '../Heading';
-import { LabelProps } from '../Label';
+import { TextProps } from '../Text';
 import type { BaseProps } from '../component-helpers';
 export type SectionIntroProps = {
     align?: 'start' | 'center';
@@ -18,13 +18,15 @@ type SectionIntroHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps;
 type SectionIntroDescriptionProps = BaseProps<HTMLParagraphElement> & {
     children: React.ReactNode | React.ReactNode[];
 };
-type SectionIntroLabelProps = LabelProps & BaseProps<HTMLDivElement>;
-declare function _Label({ children, ...rest }: PropsWithChildren<SectionIntroLabelProps>): import("react/jsx-runtime").JSX.Element;
+export type SectionIntroLabelProps = Omit<TextProps, 'as' | 'ref' | 'animate'> & Omit<BaseProps<HTMLSpanElement>, 'animate'> & {
+    animate?: boolean;
+    animationDelay?: number;
+};
 type SectionIntroLinkProps = Omit<LinkProps, 'size'> & BaseProps<HTMLAnchorElement>;
 export declare const SectionIntro: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SectionIntroProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>> & {
     Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SectionIntroHeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Omit<SectionIntroDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     Link: React.ForwardRefExoticComponent<Omit<SectionIntroLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-    Label: typeof _Label;
+    Label: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SectionIntroLabelProps>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 };
 export {};

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", "dark-gray", "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';