@primer/react-brand 0.25.0-rc.4635e10 → 0.25.0-rc.9d1748c

package/lib/Accordion/Accordion.d.ts

@@ -7,12 +7,15 @@ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/compone
 export type AccordionRootProps = BaseProps<HTMLDetailsElement> & {
     open?: boolean;
     children: React.ReactElement<AccordionHeadingProps | AccordionContentProps>[];
+    variant?: 'default' | 'emphasis';
 } & React.HTMLAttributes<HTMLDetailsElement>;
 export declare const AccordionRoot: React.ForwardRefExoticComponent<Omit<AccordionRootProps, "ref"> & React.RefAttributes<HTMLDetailsElement>>;
 type AccordionHeadingProps = BaseProps<HTMLHeadingElement> & {
     className?: string;
     children: string;
     as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    reversedToggles?: boolean;
+    variant?: 'default' | 'emphasis';
 };
 export declare const AccordionHeading: React.ForwardRefExoticComponent<Omit<AccordionHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 type AccordionContentProps = BaseProps<HTMLElement> & {

package/lib/CTABanner/CTABanner.d.ts

@@ -4,14 +4,14 @@ import type { BaseProps } from '../component-helpers';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css';
-export type CTABannerProps = BaseProps<HTMLElement> & {
+export type CTABannerProps = BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
     children: React.ReactNode | React.ReactNode[];
     align?: 'start' | 'center';
     hasBorder?: boolean;
     hasShadow?: boolean;
     hasBackground?: boolean;
 };
-export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLElement> & {
+export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
     children: React.ReactNode | React.ReactNode[];
     align?: "start" | "center" | undefined;
     hasBorder?: boolean | undefined;

package/lib/Card/Card.d.ts

@@ -24,6 +24,7 @@ export type CardProps = {
      * Changes the cta text of the card
      * */
     ctaText?: string;
+    hasBorder?: boolean;
 } & 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;

package/lib/FAQ/FAQ.d.ts

@@ -7,13 +7,13 @@ import type { BaseProps } from '../component-helpers';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/faq.css';
-type FAQRootProps = PropsWithChildren<BaseProps<HTMLElement>> & React.HTMLAttributes<HTMLElement>;
+export type FAQRootProps = PropsWithChildren<BaseProps<HTMLElement>> & React.HTMLAttributes<HTMLElement>;
 type FAQHeadingProps = BaseProps<HTMLHeadingElement> & {
     align?: 'start' | 'center';
     children: React.ReactNode | React.ReactNode[];
     as?: HeadingProps['as'];
 } & HeadingProps;
-type FAQSubheadingProps = BaseProps<HTMLHeadingElement> & {
+export type FAQSubheadingProps = BaseProps<HTMLHeadingElement> & {
     align?: 'start' | 'center';
     children: React.ReactNode | React.ReactNode[];
     as?: Exclude<HeadingProps['as'], 'h1'>;
@@ -31,6 +31,8 @@ export declare const FAQ: React.ForwardRefExoticComponent<Omit<FAQRootProps, "re
         className?: string | undefined;
         children: string;
         as?: "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        reversedToggles?: boolean | undefined;
+        variant?: "default" | "emphasis" | undefined;
     }, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Answer: typeof AccordionContent;
 };

package/lib/FAQ/FAQGroup.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { FAQSubheadingProps } from './';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/faq.css';
+declare function _Heading({ children, className, as, ...rest }: FAQSubheadingProps): JSX.Element;
+type FAQGroupProps = React.PropsWithChildren<{
+    id?: string;
+    defaultSelectedIndex?: number;
+}>;
+declare function _FAQGroup({ children, id, defaultSelectedIndex, ...rest }: FAQGroupProps): JSX.Element;
+/**
+ * FAQGroup component:
+ * {@link https://primer.style/brand/components/FAQ#grouped-faqs See usage examples}.
+ */
+export declare const FAQGroup: typeof _FAQGroup & {
+    Heading: typeof _Heading;
+};
+export {};

package/lib/FAQ/index.d.ts

@@ -1 +1,2 @@
 export * from './FAQ';
+export * from './FAQGroup';

package/lib/Grid/Grid.d.ts

@@ -36,7 +36,7 @@ type GridColumnProps<T extends keyof JSX.IntrinsicElements = 'div'> = {
     as?: T | 'div' | 'span' | 'section';
     span?: GridColumnIndex | ResponsiveMap;
     start?: GridColumnIndex | ResponsiveMap;
-} & (T extends 'span' ? BaseProps<HTMLSpanElement> : T extends 'section' ? BaseProps<HTMLElement> : BaseProps<HTMLDivElement>);
+} & (T extends 'span' ? BaseProps<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> : T extends 'section' ? BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> : BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>);
 /**
  * Use Grid to create flexible and responsive grid-based layouts
  * @see https://primer.style/brand/components/Grid

package/lib/Hero/Hero.d.ts

@@ -8,6 +8,8 @@ import type { BaseProps } from '../component-helpers';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css';
 export type HeroProps = BaseProps<HTMLElement> & {
     align?: 'start' | 'center';
+    imageContainerClassName?: string;
+    imageContainerStyle?: React.CSSProperties;
 };
 type HeroHeadingProps = Omit<HeadingProps, 'as'>;
 type HeroDescriptionProps = {

package/lib/SectionIntro/SectionIntro.d.ts

@@ -5,6 +5,7 @@ import { LabelProps } from '../Label';
 import type { BaseProps } from '../component-helpers';
 export type SectionIntroProps = {
     align?: 'start' | 'center';
+    fullWidth?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement> & BaseProps<HTMLHeadingElement>;
 type SectionIntroHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps;
 type SectionIntroLabelProps = LabelProps & BaseProps<HTMLDivElement>;

package/lib/Stack/Stack.d.ts

@@ -78,7 +78,7 @@ export type StackProps = BaseProps<HTMLElement> & {
      * Applies flex-wrap to the Stack, using the flex-wrap CSS property.
      */
     flexWrap?: StackFlexWrapVariants | ResponsiveFlexWrapMap;
-} & BaseProps<HTMLDivElement>;
+} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
 /**
  * Stack enables layout of its immediate children along the vertical or horizontal axis
  * @see https://primer.style/brand/components/Stack
@@ -96,25 +96,25 @@ export declare const Stack: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLE
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    gap?: "normal" | "condensed" | "none" | 4 | 8 | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
+    gap?: "normal" | 4 | "condensed" | "none" | 8 | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
     /**
      * Applies vertical alignment to child elements relative to the Stack, using the align-items CSS property.
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    alignItems?: "center" | "flex-start" | "flex-end" | ResponsiveAlignItemsMap | undefined;
+    alignItems?: "center" | "flex-end" | "flex-start" | ResponsiveAlignItemsMap | undefined;
     /**
      * Defines the padding CSS property on the parent Stack.
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    padding?: "normal" | "condensed" | "none" | 4 | 8 | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
+    padding?: "normal" | 4 | "condensed" | "none" | 8 | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
     /**
      * Applies horizontal alignment to child elements relative to the Stack, using the justify-content CSS property.
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | ResponsiveJustifyContentMap | undefined;
+    justifyContent?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | ResponsiveJustifyContentMap | undefined;
     /**
      * Forward inline styles
      */
@@ -122,6 +122,6 @@ export declare const Stack: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLE
     /**
      * Applies flex-wrap to the Stack, using the flex-wrap CSS property.
      */
-    flexWrap?: "wrap" | "nowrap" | ResponsiveFlexWrapMap | undefined;
-} & BaseProps<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
+    flexWrap?: "nowrap" | "wrap" | ResponsiveFlexWrapMap | undefined;
+} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export {};

package/lib/Timeline/Timeline.d.ts

@@ -5,12 +5,14 @@ import { BaseProps } from '../component-helpers';
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/timeline/colors-with-modes.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/timeline/base.css';
-export type TimelineProps = BaseProps<HTMLUListElement>;
+export type TimelineProps = {
+    fullWidth?: boolean;
+} & BaseProps<HTMLUListElement>;
 export type TimelineItemProps = BaseProps<HTMLLIElement>;
 /**
  * Use Timeline to display a list of connected items as a vertical timeline.
  * @see https://primer.style/brand/components/Timeline
  */
-export declare const Timeline: (({ animate, className, children, ...rest }: PropsWithChildren<TimelineProps>) => JSX.Element) & {
+export declare const Timeline: (({ animate, className, children, fullWidth, ...rest }: PropsWithChildren<TimelineProps>) => JSX.Element) & {
     Item: ({ className, children, ...rest }: PropsWithChildren<TimelineItemProps>) => JSX.Element;
 };