@primer/react-brand 0.25.0 → 0.26.0-rc.996be2c

package/lib/Bento/Bento.d.ts

@@ -0,0 +1,54 @@
+import React, { ReactElement } from 'react';
+import { Icon } from '@primer/octicons-react';
+import type { BaseProps } from '../component-helpers';
+import { HeadingProps, ColorMode as FullColorMode } from '../';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css';
+type ColorMode = Exclude<FullColorMode, 'auto'>;
+export type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+export type ColumnIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type ResponsiveColumnIndex = Partial<Record<Size, ColumnIndex>>;
+type ResponsiveRowIndex = Partial<Record<Size, number>>;
+type Flow = 'row' | 'column';
+type ResponsiveFlow = Partial<Record<Size, Flow>>;
+type Align = 'start' | 'center' | 'end';
+type ResponsiveAlign = Partial<Record<Size, Align>>;
+type Padding = 'condensed' | 'normal' | 'spacious';
+type ResponsivePadding = Partial<Record<Size, Padding>>;
+type Order = 'default' | 'reversed';
+type ResponsiveOrder = Partial<Record<Size, Order>>;
+type BentoProps = React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
+type BentoItemProps = {
+    columnStart?: ColumnIndex | ResponsiveColumnIndex;
+    columnSpan?: ColumnIndex | ResponsiveColumnIndex;
+    rowStart?: number | ResponsiveRowIndex;
+    rowSpan?: number | ResponsiveRowIndex;
+    flow?: Flow | ResponsiveFlow;
+    colorMode?: ColorMode;
+    visualAsBackground?: boolean;
+    order?: Order | ResponsiveOrder;
+    bgColor?: 'default' | 'subtle';
+} & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
+type BentoContentProps = {
+    leadingVisual?: ReactElement | Icon;
+    padding?: Padding | ResponsivePadding;
+    verticalAlign?: Align | ResponsiveAlign;
+    horizontalAlign?: Exclude<Align, 'end'> | Partial<Record<Size, Exclude<Align, 'end'>>>;
+} & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
+type BentoHeadingProps = {
+    variant?: 'default' | 'muted';
+} & BaseProps<HTMLHeadingElement> & HeadingProps;
+type BentoVisualProps = {
+    horizontalAlign?: Align;
+    verticalAlign?: Align;
+    fillMedia?: boolean;
+    overflow?: 'hidden' | 'initial';
+    position?: string;
+    padding?: Padding | ResponsivePadding;
+} & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
+export declare const Bento: (({ className, ...rest }: BentoProps) => JSX.Element) & {
+    Item: ({ className, columnStart, columnSpan, rowStart, rowSpan, flow, colorMode, visualAsBackground, order, bgColor, children, ...rest }: BentoItemProps) => JSX.Element;
+    Visual: ({ horizontalAlign, verticalAlign, fillMedia, overflow, position, padding, className, children, ...rest }: BentoVisualProps) => JSX.Element;
+    Content: ({ children, leadingVisual: LeadingVisual, padding, verticalAlign, horizontalAlign, className, ...rest }: BentoContentProps) => JSX.Element;
+    Heading: React.ForwardRefExoticComponent<Omit<BentoHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+};
+export {};

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

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

package/lib/Bento/index.d.ts

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

package/lib/CTABanner/CTABanner.d.ts

@@ -23,10 +23,10 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<H
     } & {
         as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
         size?: "display" | "1" | "2" | "3" | "4" | "5" | "6" | "subhead-large" | "subhead-medium" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | {
-            narrow?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | undefined;
-            regular?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | undefined;
-            wide?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | {
+            narrow?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | undefined;
+            regular?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | undefined;
+            wide?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | undefined;
         } | undefined;
         stretch?: "normal" | "condensed" | "expanded" | {
             narrow?: "normal" | "condensed" | "expanded" | undefined;

package/lib/LogoSuite/LogoSuite.d.ts

@@ -35,7 +35,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
     Description: React.ForwardRefExoticComponent<(Omit<BaseProps<HTMLParagraphElement> & {
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;
@@ -46,7 +46,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
     }, "ref"> | Omit<BaseProps<HTMLParagraphElement> & {
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;
@@ -57,7 +57,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
     }, "ref"> | Omit<BaseProps<HTMLParagraphElement> & {
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;
@@ -68,7 +68,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
     }, "ref"> | Omit<BaseProps<HTMLParagraphElement> & {
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;
@@ -79,7 +79,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
     }, "ref"> | Omit<BaseProps<HTMLParagraphElement> & {
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;