Update API report
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -6,12 +6,12 @@
|
||||
/// <reference types="react" />
|
||||
|
||||
import { CSSProperties } from 'react';
|
||||
import { JSXElementConstructor } from 'react';
|
||||
import { DOMElement } from 'react';
|
||||
import { default as React_2 } from 'react';
|
||||
import { ReactElement } from 'react';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
// @public (undocumented)
|
||||
export type AlignItems =
|
||||
export type AlignItemsProps =
|
||||
| 'stretch'
|
||||
| 'flex-start'
|
||||
| 'center'
|
||||
@@ -20,6 +20,25 @@ export type AlignItems =
|
||||
Record<Breakpoint, 'stretch' | 'flex-start' | 'center' | 'flex-end'>
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type AsProps =
|
||||
| 'div'
|
||||
| 'span'
|
||||
| 'p'
|
||||
| 'article'
|
||||
| 'section'
|
||||
| 'main'
|
||||
| 'nav'
|
||||
| 'aside'
|
||||
| 'ul'
|
||||
| 'ol'
|
||||
| 'li'
|
||||
| 'details'
|
||||
| 'summary'
|
||||
| 'dd'
|
||||
| 'dl'
|
||||
| 'dt';
|
||||
|
||||
// @public (undocumented)
|
||||
export type Background =
|
||||
| 'background'
|
||||
@@ -31,7 +50,7 @@ export type Background =
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type BorderRadius =
|
||||
export type BorderRadiusProps =
|
||||
| 'none'
|
||||
| 'small'
|
||||
| 'medium'
|
||||
@@ -39,68 +58,35 @@ export type BorderRadius =
|
||||
| Partial<Record<Breakpoint, 'none' | 'small' | 'medium' | 'full'>>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const Box: (props: BoxProps) => ReactElement<
|
||||
export const Box: (props: BoxProps) => DOMElement<
|
||||
{
|
||||
className: string;
|
||||
style: CSSProperties | undefined;
|
||||
children: ReactNode;
|
||||
},
|
||||
string | JSXElementConstructor<any>
|
||||
Element
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export interface BoxProps {
|
||||
export interface BoxProps extends SpaceProps, ColorProps {
|
||||
// (undocumented)
|
||||
alignItems?: AlignItems;
|
||||
alignItems?: AlignItemsProps;
|
||||
// (undocumented)
|
||||
as?: keyof JSX.IntrinsicElements;
|
||||
// (undocumented)
|
||||
background?: Background;
|
||||
// (undocumented)
|
||||
borderRadius?: BorderRadius;
|
||||
borderRadius?: BorderRadiusProps;
|
||||
// (undocumented)
|
||||
children?: React.ReactNode;
|
||||
// (undocumented)
|
||||
className?: string;
|
||||
// (undocumented)
|
||||
color?: Color;
|
||||
display?: DisplayProps;
|
||||
// (undocumented)
|
||||
display?: Display;
|
||||
flexDirection?: FlexDirectionProps;
|
||||
// (undocumented)
|
||||
flexDirection?: FlexDirection;
|
||||
flexWrap?: FlexWrapProps;
|
||||
// (undocumented)
|
||||
flexWrap?: FlexWrap;
|
||||
// (undocumented)
|
||||
gap?: Gap;
|
||||
// (undocumented)
|
||||
justifyContent?: JustifyContent;
|
||||
// (undocumented)
|
||||
margin?: Margin;
|
||||
// (undocumented)
|
||||
marginBottom?: MarginBottom;
|
||||
// (undocumented)
|
||||
marginLeft?: MarginLeft;
|
||||
// (undocumented)
|
||||
marginRight?: MarginRight;
|
||||
// (undocumented)
|
||||
marginTop?: MarginTop;
|
||||
// (undocumented)
|
||||
marginX?: MarginX;
|
||||
// (undocumented)
|
||||
marginY?: MarginY;
|
||||
// (undocumented)
|
||||
padding?: Padding;
|
||||
// (undocumented)
|
||||
paddingBottom?: PaddingBottom;
|
||||
// (undocumented)
|
||||
paddingLeft?: PaddingLeft;
|
||||
// (undocumented)
|
||||
paddingRight?: PaddingRight;
|
||||
// (undocumented)
|
||||
paddingTop?: PaddingTop;
|
||||
// (undocumented)
|
||||
paddingX?: PaddingX;
|
||||
// (undocumented)
|
||||
paddingY?: PaddingY;
|
||||
justifyContent?: JustifyContentProps;
|
||||
// (undocumented)
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
@@ -163,7 +149,15 @@ export type Color =
|
||||
| Partial<Record<Theme, 'primary' | 'secondary' | 'error'>>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type Display =
|
||||
export interface ColorProps {
|
||||
// (undocumented)
|
||||
background?: Background;
|
||||
// (undocumented)
|
||||
color?: Color;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export type DisplayProps =
|
||||
| 'flex'
|
||||
| 'none'
|
||||
| 'inline'
|
||||
@@ -171,13 +165,13 @@ export type Display =
|
||||
| Partial<Record<Breakpoint, 'flex' | 'none' | 'inline' | 'block'>>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type FlexDirection =
|
||||
export type FlexDirectionProps =
|
||||
| 'row'
|
||||
| 'column'
|
||||
| Partial<Record<Breakpoint, 'row' | 'column'>>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type FlexWrap =
|
||||
export type FlexWrapProps =
|
||||
| 'wrap'
|
||||
| 'nowrap'
|
||||
| Partial<Record<Breakpoint, 'wrap' | 'nowrap'>>;
|
||||
@@ -203,7 +197,7 @@ export type IconNames =
|
||||
| 'trash';
|
||||
|
||||
// @public (undocumented)
|
||||
export type JustifyContent =
|
||||
export type JustifyContentProps =
|
||||
| 'stretch'
|
||||
| 'flex-start'
|
||||
| 'center'
|
||||
@@ -279,6 +273,40 @@ export const space: {
|
||||
xxl: string;
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export interface SpaceProps {
|
||||
// (undocumented)
|
||||
gap?: Gap;
|
||||
// (undocumented)
|
||||
margin?: Margin;
|
||||
// (undocumented)
|
||||
marginBottom?: MarginBottom;
|
||||
// (undocumented)
|
||||
marginLeft?: MarginLeft;
|
||||
// (undocumented)
|
||||
marginRight?: MarginRight;
|
||||
// (undocumented)
|
||||
marginTop?: MarginTop;
|
||||
// (undocumented)
|
||||
marginX?: MarginX;
|
||||
// (undocumented)
|
||||
marginY?: MarginY;
|
||||
// (undocumented)
|
||||
padding?: Padding;
|
||||
// (undocumented)
|
||||
paddingBottom?: PaddingBottom;
|
||||
// (undocumented)
|
||||
paddingLeft?: PaddingLeft;
|
||||
// (undocumented)
|
||||
paddingRight?: PaddingRight;
|
||||
// (undocumented)
|
||||
paddingTop?: PaddingTop;
|
||||
// (undocumented)
|
||||
paddingX?: PaddingX;
|
||||
// (undocumented)
|
||||
paddingY?: PaddingY;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export type Theme = keyof typeof themes;
|
||||
|
||||
|
||||
@@ -15,7 +15,6 @@
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Stack } from '../../Stack';
|
||||
import { Inline } from '../../Inline';
|
||||
import { Box } from '../Box';
|
||||
|
||||
@@ -32,8 +31,11 @@ const FakeBox = ({ children }: { children: string }) => (
|
||||
|
||||
export const Padding = () => {
|
||||
return (
|
||||
<Stack
|
||||
align="center"
|
||||
<Box
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
marginBottom="md"
|
||||
gap="xl"
|
||||
@@ -41,65 +43,65 @@ export const Padding = () => {
|
||||
style={{ border: '1px solid #e7e7e7' }}
|
||||
>
|
||||
<Inline align="center" gap="xl">
|
||||
<Stack
|
||||
align="center"
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
padding="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>padding</FakeBox>
|
||||
</Stack>
|
||||
<Stack
|
||||
align="center"
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingX="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingX</FakeBox>
|
||||
</Stack>
|
||||
<Stack
|
||||
align="center"
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingY="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingY</FakeBox>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Inline>
|
||||
<Inline align="center" gap="xl">
|
||||
<Stack
|
||||
align="center"
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingTop="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingTop</FakeBox>
|
||||
</Stack>
|
||||
<Stack
|
||||
align="center"
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingBottom="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingBottom</FakeBox>
|
||||
</Stack>
|
||||
<Stack
|
||||
align="center"
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingLeft="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingLeft</FakeBox>
|
||||
</Stack>
|
||||
<Stack
|
||||
align="center"
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingRight="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingRight</FakeBox>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Inline>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -23,3 +23,4 @@
|
||||
export * from './components/Button';
|
||||
export * from './components/Box';
|
||||
export * from './components/Icon';
|
||||
export * from './layout/types';
|
||||
|
||||
Reference in New Issue
Block a user