@primer/react-brand 0.0.0-20260203145136 → 0.0.0-20260204134628

package/lib/Box/Box.d.ts

@@ -9,16 +9,11 @@ type ResponsiveSpacingMap = {
     wide?: SpacingValues;
 };
 export declare const BoxBackgroundColors: readonly ["default", "inset", "subtle", "overlay"];
-type BackgroundColors = (typeof BoxBackgroundColors)[number] | AnyString;
+type BackgroundColors = (typeof BoxBackgroundColors)[number];
 export declare const BoxBorderRadiusOptions: readonly ["small", "medium", "large", "xlarge", "full"];
 type BorderRadiusOptions = (typeof BoxBorderRadiusOptions)[number];
-export declare const BoxBorderWidthOptions: readonly ["none", "thin", "thick", "thicker"];
+export declare const BoxBorderWidthOptions: readonly ["thin", "thick", "thicker"];
 type BorderWidthOptions = (typeof BoxBorderWidthOptions)[number];
-type ResponsiveBorderWidthMap = {
-    narrow?: BorderWidthOptions;
-    regular?: BorderWidthOptions;
-    wide?: BorderWidthOptions;
-};
 export declare const BoxBorderColorOptions: readonly ["default", "muted", "subtle"];
 type BorderColorOptions = (typeof BoxBorderColorOptions)[number];
 type BorderStyleOptions = Extract<React.CSSProperties['borderStyle'], 'solid' | 'none'>;
@@ -62,11 +57,11 @@ type BoxProps = {
     marginInlineStart?: SpacingValues | ResponsiveSpacingMap;
     backgroundColor?: BackgroundColors;
     borderRadius?: BorderRadiusOptions;
-    borderWidth?: BorderWidthOptions | ResponsiveBorderWidthMap;
-    borderBlockStartWidth?: BorderWidthOptions | ResponsiveBorderWidthMap;
-    borderInlineEndWidth?: BorderWidthOptions | ResponsiveBorderWidthMap;
-    borderBlockEndWidth?: BorderWidthOptions | ResponsiveBorderWidthMap;
-    borderInlineStartWidth?: BorderWidthOptions | ResponsiveBorderWidthMap;
+    borderWidth?: BorderWidthOptions;
+    borderBlockStartWidth?: BorderWidthOptions;
+    borderInlineEndWidth?: BorderWidthOptions;
+    borderBlockEndWidth?: BorderWidthOptions;
+    borderInlineStartWidth?: BorderWidthOptions;
     borderColor?: BorderColorOptions;
     borderStyle?: BorderStyleOptions;
     /**

package/lib/Card/Card.d.ts

@@ -42,9 +42,7 @@ export type CardProps = {
      */
     align?: 'start' | 'center';
 } & Omit<BaseProps<HTMLDivElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> & Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
-type CardImageProps = {
-    position?: 'block-start' | 'block-end';
-} & ImageProps;
+type CardImageProps = ImageProps;
 declare function CardImage({ className, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
 type CardIconProps = IconProps;
 type CardLabelProps = BaseProps<HTMLSpanElement> & {

package/lib/EyebrowText/EyebrowText.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+export type EyebrowTextProps = BaseProps<HTMLSpanElement> & {
+    ['data-testid']?: string;
+} & React.ComponentPropsWithoutRef<'span'>;
+/**
+ * EyebrowText is a simple uppercase, muted text label typically used above headings.
+ * @see https://primer.style/brand/components/EyebrowText
+ */
+export declare const EyebrowText: React.ForwardRefExoticComponent<Omit<EyebrowTextProps, "ref"> & React.RefAttributes<HTMLSpanElement>> & {
+    testIds: {
+        root: string;
+    };
+};

package/lib/EyebrowText/index.d.ts

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

package/lib/Hero/Hero.d.ts

@@ -1,18 +1,17 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
+import { ButtonBaseProps } from '../Button';
+import { HeadingProps } from '../Heading';
+import { TextSizes, TextWeightVariants, ResponsiveWeightMap } from '../Text';
+import { LabelProps } from '../Label';
 import type { BaseProps } from '../component-helpers';
-import type { HeroAlign, HeroVariant } from './HeroContext';
 /**
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css';
 export type HeroProps = BaseProps<HTMLElement> & {
-    align?: HeroAlign;
+    align?: 'start' | 'center';
     imageContainerClassName?: string;
     imageContainerStyle?: React.CSSProperties;
-    imageContainerRef?: React.RefObject<HTMLDivElement | null>;
-    imageBackgroundColor?: 'default' | 'subtle';
-    variant?: HeroVariant;
-    enableAnimation?: boolean;
     /**
      * Escape-hatch for inserting custom React components.
      * Warning:
@@ -22,16 +21,25 @@ export type HeroProps = BaseProps<HTMLElement> & {
     trailingComponent?: React.FunctionComponent;
     'data-testid'?: string;
 };
+type HeroHeadingProps = Omit<HeadingProps, 'as'> & {
+    fullWidth?: boolean;
+};
+type HeroVideoProps = {
+    position?: 'inline-end' | 'block-end';
+    'data-testid'?: string;
+} & PropsWithChildren<BaseProps<HTMLDivElement>>;
+type HeroEyebrowProps = PropsWithChildren<BaseProps<HTMLDivElement>>;
+type HeroLabelProps = LabelProps & BaseProps<HTMLSpanElement>;
 export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeroProps>, "ref"> & React.RefAttributes<HTMLElement>> & {
-    Heading: React.ForwardRefExoticComponent<Omit<import("./sub-components").HeroHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Heading: React.ForwardRefExoticComponent<Omit<HeroHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<(Omit<{
-        size?: typeof import("..").TextSizes[number];
-        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        size?: (typeof TextSizes)[number];
+        weight?: TextWeightVariants | ResponsiveWeightMap;
     } & BaseProps<HTMLParagraphElement> & {
         font?: import("..").TextFontVariants;
-        size?: typeof import("..").TextSizes[number];
+        size?: (typeof TextSizes)[number];
         variant?: typeof import("..").TextVariants[number];
-        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        weight?: TextWeightVariants | ResponsiveWeightMap;
         align?: "start" | "center" | "end";
         hasAntiAliasing?: boolean;
     } & {
@@ -41,13 +49,13 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
-        size?: typeof import("..").TextSizes[number];
-        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        size?: (typeof TextSizes)[number];
+        weight?: TextWeightVariants | ResponsiveWeightMap;
     } & BaseProps<HTMLParagraphElement> & {
         font?: import("..").TextFontVariants;
-        size?: typeof import("..").TextSizes[number];
+        size?: (typeof TextSizes)[number];
         variant?: typeof import("..").TextVariants[number];
-        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        weight?: TextWeightVariants | ResponsiveWeightMap;
         align?: "start" | "center" | "end";
         hasAntiAliasing?: boolean;
     } & {
@@ -57,13 +65,13 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
-        size?: typeof import("..").TextSizes[number];
-        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        size?: (typeof TextSizes)[number];
+        weight?: TextWeightVariants | ResponsiveWeightMap;
     } & BaseProps<HTMLParagraphElement> & {
         font?: import("..").TextFontVariants;
-        size?: typeof import("..").TextSizes[number];
+        size?: (typeof TextSizes)[number];
         variant?: typeof import("..").TextVariants[number];
-        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        weight?: TextWeightVariants | ResponsiveWeightMap;
         align?: "start" | "center" | "end";
         hasAntiAliasing?: boolean;
     } & {
@@ -73,13 +81,13 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
-        size?: typeof import("..").TextSizes[number];
-        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        size?: (typeof TextSizes)[number];
+        weight?: TextWeightVariants | ResponsiveWeightMap;
     } & BaseProps<HTMLParagraphElement> & {
         font?: import("..").TextFontVariants;
-        size?: typeof import("..").TextSizes[number];
+        size?: (typeof TextSizes)[number];
         variant?: typeof import("..").TextVariants[number];
-        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        weight?: TextWeightVariants | ResponsiveWeightMap;
         align?: "start" | "center" | "end";
         hasAntiAliasing?: boolean;
     } & {
@@ -89,13 +97,13 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
-        size?: typeof import("..").TextSizes[number];
-        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        size?: (typeof TextSizes)[number];
+        weight?: TextWeightVariants | ResponsiveWeightMap;
     } & BaseProps<HTMLParagraphElement> & {
         font?: import("..").TextFontVariants;
-        size?: typeof import("..").TextSizes[number];
+        size?: (typeof TextSizes)[number];
         variant?: typeof import("..").TextVariants[number];
-        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        weight?: TextWeightVariants | ResponsiveWeightMap;
         align?: "start" | "center" | "end";
         hasAntiAliasing?: boolean;
     } & {
@@ -108,14 +116,14 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     PrimaryAction: React.ForwardRefExoticComponent<(Omit<{
         as?: "a" | "button";
         href: string;
-    } & import("..").ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
+    } & ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
         as?: "a";
     } & {
         children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
         as?: "a" | "button";
         href: string;
-    } & import("..").ButtonBaseProps & BaseProps<HTMLButtonElement> & {
+    } & ButtonBaseProps & BaseProps<HTMLButtonElement> & {
         as?: "button";
     } & {
         children?: React.ReactNode | undefined;
@@ -123,21 +131,20 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     SecondaryAction: React.ForwardRefExoticComponent<(Omit<{
         as?: "a" | "button";
         href: string;
-    } & import("..").ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
+    } & ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
         as?: "a";
     } & {
         children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
         as?: "a" | "button";
         href: string;
-    } & import("..").ButtonBaseProps & BaseProps<HTMLButtonElement> & {
+    } & ButtonBaseProps & BaseProps<HTMLButtonElement> & {
         as?: "button";
     } & {
         children?: React.ReactNode | undefined;
     }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     Image: React.ForwardRefExoticComponent<(Omit<{
-        position?: import("./HeroContext").HeroMediaPositions;
-        enableBorder?: boolean;
+        position?: "inline-end" | "block-end";
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
         alt: string;
@@ -149,8 +156,7 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         as?: "img";
         srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
     }, "ref"> | Omit<{
-        position?: import("./HeroContext").HeroMediaPositions;
-        enableBorder?: boolean;
+        position?: "inline-end" | "block-end";
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
         alt: string;
@@ -166,33 +172,12 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         }[];
         srcSet?: undefined;
     }, "ref">) & React.RefAttributes<HTMLImageElement>>;
-    Video: React.ForwardRefExoticComponent<(Omit<{
-        position?: import("./HeroContext").HeroMediaPositions;
-        enableBorder?: boolean;
-        'data-testid'?: string;
-    } & BaseProps<HTMLDivElement> & {
-        children?: React.ReactNode | undefined;
-    } & {
-        poster?: never;
-        posterAltText?: never;
-        posterTitle?: never;
-    }, "ref"> | Omit<{
-        position?: import("./HeroContext").HeroMediaPositions;
-        enableBorder?: boolean;
-        'data-testid'?: string;
-    } & BaseProps<HTMLDivElement> & {
-        children?: React.ReactNode | undefined;
-    } & {
-        poster: string;
-        posterAltText: string;
-        posterTitle: string;
-    }, "ref">) & React.RefAttributes<HTMLDivElement>>;
-    Label: React.ForwardRefExoticComponent<Omit<import("./sub-components").HeroLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-    Eyebrow: React.ForwardRefExoticComponent<Omit<import("./sub-components").HeroEyebrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Video: React.ForwardRefExoticComponent<Omit<HeroVideoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<HeroLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Eyebrow: React.ForwardRefExoticComponent<Omit<HeroEyebrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     testIds: {
         root: string;
         readonly video: string;
-        readonly grid: string;
-        readonly imageWrapper: string;
     };
 };
+export {};

package/lib/animation/AnimationProvider/AnimationProvider.d.ts

@@ -3,7 +3,7 @@ import React, { PropsWithChildren } from 'react';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/animation/base.css';
-export declare const AnimationVariants: readonly ["fade-in", "fade-out", "slide-in-up", "slide-in-down", "slide-in-left", "slide-in-right", "scale-in-up", "scale-in-down", "scale-in", "fill-in-top", "scale-in-right", "scale-in-left", "fill-in-right", "reveal-in-up"];
+export declare const AnimationVariants: readonly ["fade-in", "fade-out", "slide-in-up", "slide-in-down", "slide-in-left", "slide-in-right", "scale-in-up", "scale-in-down", "scale-in", "fill-in-top", "scale-in-right", "scale-in-left", "fill-in-right"];
 type Variant = (typeof AnimationVariants)[number];
 type VariantAdvanced = {
     variant: Variant;
@@ -12,7 +12,7 @@ type VariantAdvanced = {
     ease?: string;
 };
 export type AnimateProps = Variant | VariantAdvanced;
-type AnimationTrigger = 'click' | 'on-visible' | 'immediate';
+type AnimationTrigger = 'click' | 'on-visible';
 type IntersectionVisibilityeOptions = 'bottom-of-screen' | 'middle-of-screen' | 'about-to-leave' | number;
 type AnimationProviderProps = {
     /**
@@ -20,7 +20,7 @@ type AnimationProviderProps = {
      */
     disableAnimations?: boolean;
     /**
-     * Controls the trigger method for the animation. One of `click`, `on-visible`, or `immediate`.
+     * Controls the trigger method for the animation. One of `click` or `on-visible`.
      */
     animationTrigger?: AnimationTrigger;
     /**