@primer/react-brand 0.20.2-rc.c3330c2 → 0.21.0-rc.e36a95f

package/lib/Box/Box.d.ts

@@ -0,0 +1,77 @@
+import React, { PropsWithChildren } from 'react';
+import { AnimateProps } from '../animation';
+import type { BaseProps } from '../component-helpers';
+export declare const BoxSpacingValues: readonly ["condensed", "normal", "spacious", 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128];
+type SpacingValues = (typeof BoxSpacingValues)[number];
+type ResponsiveSpacingMap = {
+    narrow?: SpacingValues;
+    regular?: SpacingValues;
+    wide?: SpacingValues;
+};
+export declare const BoxBackgroundColors: readonly ["default", "inset", "subtle", "overlay"];
+type BackgroundColors = (typeof BoxBackgroundColors)[number];
+export declare const BoxBorderRadiusOptions: readonly ["small", "medium", "large", "full"];
+type BorderRadiusOptions = (typeof BoxBorderRadiusOptions)[number];
+export declare const BoxBorderWidthOptions: readonly ["thin", "thick", "thicker"];
+type BorderWidthOptions = (typeof BoxBorderWidthOptions)[number];
+export declare const BoxBorderColorOptions: readonly ["default", "muted", "subtle"];
+type BorderColorOptions = (typeof BoxBorderColorOptions)[number];
+type BorderStyleOptions = Extract<React.CSSProperties['borderStyle'], 'solid' | 'none'>;
+type BoxProps = {
+    /**
+     * Adding padding all internal sides of the Box
+     */
+    padding?: SpacingValues | ResponsiveSpacingMap;
+    /**
+     * Adding padding on the internal top side of the Box
+     */
+    paddingBlockStart?: SpacingValues | ResponsiveSpacingMap;
+    /**
+     * Adding padding on the internal right side of the Box
+     */
+    paddingInlineEnd?: SpacingValues | ResponsiveSpacingMap;
+    /**
+     * Adding padding on the internal bottom side of the Box
+     */
+    paddingBlockEnd?: SpacingValues | ResponsiveSpacingMap;
+    /**
+     * Adding padding on the internal left side of the Box
+     */
+    paddingInlineStart?: SpacingValues | ResponsiveSpacingMap;
+    margin?: SpacingValues | ResponsiveSpacingMap;
+    /**
+     * Adding margin on the external top side of the Box
+     */
+    marginBlockStart?: SpacingValues | ResponsiveSpacingMap;
+    /**
+     * Adding margin on the external right side of the Box
+     */
+    marginInlineEnd?: SpacingValues | ResponsiveSpacingMap;
+    /**
+     * Adding margin on the external bottom side of the Box
+     */
+    marginBlockEnd?: SpacingValues | ResponsiveSpacingMap;
+    /**
+     * Adding margin on the external left side of the Box
+     */
+    marginInlineStart?: SpacingValues | ResponsiveSpacingMap;
+    backgroundColor?: BackgroundColors;
+    borderRadius?: BorderRadiusOptions;
+    borderWidth?: BorderWidthOptions;
+    borderColor?: BorderColorOptions;
+    borderStyle?: BorderStyleOptions;
+    /**
+     * Apply one-off animations to direct children of the Box
+     */
+    animate?: AnimateProps;
+    /**
+     * Test id for the Box
+     */
+    'data-testid'?: string;
+} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Use Box to apply fine-grained styling to content.
+ * @see https://primer.style/brand/components/Box
+ */
+export declare const Box: ({ animate, children, className, "data-testid": testId, style, padding, paddingBlockStart, paddingInlineEnd, paddingBlockEnd, paddingInlineStart, margin, marginBlockStart, marginInlineEnd, marginBlockEnd, marginInlineStart, backgroundColor, borderRadius, borderWidth, borderColor, borderStyle, }: PropsWithChildren<BoxProps>) => JSX.Element;
+export {};

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

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

package/lib/Box/index.d.ts

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

package/lib/Stack/Stack.d.ts

@@ -9,6 +9,8 @@ type StackSpacingVariants = (typeof StackSpacingVariants)[number];
 export declare const defaultStackSpacing: "condensed";
 export declare const StackAlignItemVariants: readonly ["center", "flex-start", "flex-end"];
 type StackAlignItemVariants = (typeof StackAlignItemVariants)[number];
+export declare const StackFlexWrapVariants: readonly ["wrap", "nowrap"];
+type StackFlexWrapVariants = (typeof StackFlexWrapVariants)[number];
 export declare const StackJustifyContentVariants: readonly ["center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly"];
 type justifyContentVariants = (typeof StackJustifyContentVariants)[number];
 type ResponsiveJustifyContentMap = {
@@ -31,6 +33,11 @@ type ResponsiveSpacingMap = {
     regular?: StackSpacingVariants;
     wide?: StackSpacingVariants;
 };
+type ResponsiveFlexWrapMap = {
+    narrow?: StackFlexWrapVariants;
+    regular?: StackFlexWrapVariants;
+    wide?: StackFlexWrapVariants;
+};
 export type StackProps = BaseProps<HTMLElement> & {
     children: React.ReactNode[] | React.ReactNode;
     /**
@@ -67,6 +74,10 @@ export type StackProps = BaseProps<HTMLElement> & {
      * Forward inline styles
      */
     style?: React.CSSProperties;
+    /**
+     * Applies flex-wrap to the Stack, using the flex-wrap CSS property.
+     */
+    flexWrap?: StackFlexWrapVariants | ResponsiveFlexWrapMap;
 } & BaseProps<HTMLDivElement>;
 /**
  * Stack enables layout of its immediate children along the vertical or horizontal axis
@@ -108,5 +119,9 @@ export declare const Stack: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLE
      * Forward inline styles
      */
     style?: React.CSSProperties | undefined;
+    /**
+     * Applies flex-wrap to the Stack, using the flex-wrap CSS property.
+     */
+    flexWrap?: "nowrap" | "wrap" | ResponsiveFlexWrapMap | undefined;
 } & BaseProps<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export {};

package/lib/component-helpers.d.ts

@@ -10,6 +10,7 @@ export declare const Container: ({ children, style, }: {
 type RedlineBackgroundProps = {
     height?: number;
     hasBorder?: boolean;
+    className?: string;
 };
 export declare function RedlineBackground({ height, hasBorder, ...rest }: PropsWithChildren<RedlineBackgroundProps>): JSX.Element;
 /**