@primer/react/dist/Stack/Stack.d.ts

An implementation of GitHub's Primer Design System using React

import { ResponsiveValue } from "../hooks/useResponsiveValue.js";
import React, { ElementType } from "react";

//#region src/Stack/Stack.d.ts
type GapScale = 'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious';
type Gap = GapScale | ResponsiveValue<GapScale>;
type DirectionScale = 'horizontal' | 'vertical';
type Direction = DirectionScale | ResponsiveValue<DirectionScale>;
type AlignScale = 'stretch' | 'start' | 'center' | 'end' | 'baseline';
type Align = AlignScale | ResponsiveValue<AlignScale>;
type WrapScale = 'wrap' | 'nowrap';
type Wrap = WrapScale | ResponsiveValue<WrapScale>;
type JustifyScale = 'start' | 'center' | 'end' | 'space-between' | 'space-evenly';
type Justify = JustifyScale | ResponsiveValue<JustifyScale>;
type PaddingScale = 'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious';
type Padding = PaddingScale | ResponsiveValue<PaddingScale>;
type StackProps<As> = React.PropsWithChildren<{
  /**
   * Customize the element type of the rendered container
   */
  as?: As;
  /**
   * Specify the gap between children elements in the stack
   */
  gap?: Gap;
  /**
   * Specify the direction for the stack container
   * @default vertical
   */
  direction?: Direction;
  /**
   * Specify the alignment between items in the cross-axis of the direction
   * @default stretch
   */
  align?: Align;
  /**
   * Specify whether items are forced onto one line or can wrap onto multiple lines
   * @default nowrap
   */
  wrap?: Wrap;
  /**
   * Specify how items will be distributed in the stacking direction
   * @default start
   */
  justify?: Justify;
  /**
   * Specify the padding of the stack container
   * @default none
   */
  padding?: Padding;
  /**
   * Specify the block (vertical) padding of the stack container.
   * Overrides the block axis of `padding` when both are set.
   */
  paddingBlock?: Padding;
  /**
   * Specify the inline (horizontal) padding of the stack container.
   * Overrides the inline axis of `padding` when both are set.
   */
  paddingInline?: Padding;
  className?: string;
}>;
type StackItemProps<As> = React.PropsWithChildren<{
  /**
   * Customize the element type of the rendered container
   */
  as?: As;
  /**
   * Allow item to keep size or expand to fill the available space
   * @default false
   */
  grow?: boolean | ResponsiveValue<boolean>;
  /**
   * Allow item to keep size or expand to fill the available space
   * @default true
   */
  shrink?: boolean | ResponsiveValue<boolean>;
  className?: string;
}>;
//#endregion
export type { StackItemProps, StackProps };