@primer/react-brand 0.17.0-rc.e3d3fb9 → 0.17.0

package/lib/Card/Card.d.ts

@@ -7,6 +7,7 @@ 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';
+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 declare type CardProps = {
@@ -24,7 +25,7 @@ export declare type CardProps = {
     ctaText?: string;
 } & BaseProps<HTMLAnchorElement> & React.ComponentPropsWithoutRef<'a'>;
 declare type CardIconProps = BaseProps<HTMLSpanElement> & {
-    icon: React.ReactNode;
+    icon: React.ReactNode | IconProps;
     color?: typeof CardIconColors[number];
     hasBackground?: boolean;
 };

package/lib/Grid/Grid.d.ts

@@ -0,0 +1,69 @@
+import React, { PropsWithChildren } from 'react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/grid/grid.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/grid/colors-with-modes.css';
+declare type ResponsiveMap = {
+    xsmall?: GridColumnIndex;
+    small?: GridColumnIndex;
+    medium?: GridColumnIndex;
+    large?: GridColumnIndex;
+    xlarge?: GridColumnIndex;
+    xxlarge?: GridColumnIndex;
+};
+export declare type GridColumnIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export declare type GridProps<T extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<T> & {
+    /**
+     * The HTML element used to render the grid.
+     */
+    as?: T | 'div' | 'span' | 'section';
+    /**
+     * Visual aid to help with alignment.
+     */
+    enableOverlay?: boolean;
+    /**
+     * Test id for the root element.
+     */
+    ['data-testid']?: string;
+} & (T extends 'span' ? BaseProps<HTMLSpanElement> : T extends 'section' ? BaseProps<HTMLElement> : BaseProps<HTMLDivElement>);
+declare 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>);
+/**
+ * Use Grid to create flexible and responsive grid-based layouts
+ * @see https://primer.style/brand/components/Grid
+ * @example
+ *   <Grid>
+ *     <Grid.Column span="6">
+ *       ...
+ *     </Grid.Column>
+ *   </Grid>
+ */
+export declare const Grid: React.NamedExoticComponent<React.HTMLAttributes<"div"> & {
+    /**
+     * The HTML element used to render the grid.
+     */
+    as?: "div" | "section" | "span" | undefined;
+    /**
+     * Visual aid to help with alignment.
+     */
+    enableOverlay?: boolean | undefined;
+    /**
+     * Test id for the root element.
+     */
+    "data-testid"?: string | undefined;
+} & BaseProps<HTMLDivElement> & {
+    children?: React.ReactNode;
+}> & {
+    readonly type: ({ className, children, as, enableOverlay, ["data-testid"]: testId, ...rest }: PropsWithChildren<GridProps>) => JSX.Element;
+} & {
+    Column: React.MemoExoticComponent<({ children, as, span, start, className, ...rest }: PropsWithChildren<GridColumnProps>) => JSX.Element>;
+    testIds: {
+        root: string;
+    };
+};
+export {};

package/lib/Grid/Grid.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/Grid/index.d.ts

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

package/lib/Image/Image.d.ts

@@ -6,15 +6,17 @@ export declare type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & Bas
     alt: string;
     aspectRatio?: AspectRatio;
     media?: string;
+    srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'srcSet'>;
 } & ({
     as?: 'img';
-    srcSet?: 'string';
+    srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'srcSet'>;
 } | {
     as: 'picture';
     sources?: {
         srcset: string;
         media: string;
     }[];
+    srcSet?: undefined;
 });
 export declare const Image: ({ className, aspectRatio, as, ref, alt, width, height, media, srcSet, ...rest }: ImageProps) => JSX.Element;
 export {};

package/lib/SubdomainNavBar/SubdomainNavBar.d.ts

@@ -59,7 +59,7 @@ declare type SearchProps = {
 };
 declare type CTAActionProps = {
     href: string;
-};
+} & React.HTMLAttributes<HTMLAnchorElement>;
 declare function PrimaryAction({ children, href, ...rest }: PropsWithChildren<CTAActionProps>): JSX.Element;
 declare function SecondaryAction({ children, href, ...rest }: PropsWithChildren<CTAActionProps>): JSX.Element;
 export declare const SubdomainNavBar: typeof Root & {