import { MaybeTwoValuesShorthandProperty } from './utils'; import { SizeKeyword } from './scales'; export type SpacingKeyword = SizeKeyword | 'none'; export interface GapProps { /** * Adjust spacing between elements. * * A single value applies to both axes. * A pair of values (eg `large-100 large-500`) can be used to set the inline and block axes respectively. * * @default 'auto' */ gap?: MaybeTwoValuesShorthandProperty; /** * Adjust spacing between elements in the block axis. * * This overrides the row value of `gap`. * * @default '' - meaning no override */ rowGap?: SpacingKeyword | ''; /** * Adjust spacing between elements in the inline axis. * * This overrides the column value of `gap`. * * @default '' - meaning no override */ columnGap?: SpacingKeyword | ''; } type BaselinePosition = 'baseline' | 'first baseline' | 'last baseline'; type ContentDistribution = 'space-between' | 'space-around' | 'space-evenly' | 'stretch'; type ContentPosition = 'center' | 'start' | 'end'; type OverflowPosition = `unsafe ${ContentPosition}` | `safe ${ContentPosition}`; /** * Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items */ export type JustifyItemsKeyword = 'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition; /** * Align items sets the align-self value on all direct children as a group. * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items */ export type AlignItemsKeyword = 'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition; /** * Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content */ export type JustifyContentKeyword = 'normal' | ContentDistribution | OverflowPosition | ContentPosition; /** *Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis. * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content */ export type AlignContentKeyword = 'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition; export interface BaseListProps { /** * The gap between the list items. * * @default 'base' */ gap?: 'base' | 'none'; } export {};