@atlaskit/primitives
Version:
Primitives are token-backed low-level building blocks.
100 lines (99 loc) • 3.36 kB
TypeScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { type ElementType, type ReactNode } from 'react';
import { type Space } from '../xcss/style-maps.partial';
import type { BasePrimitiveProps } from './types';
export type FlexProps<T extends ElementType = 'div'> = {
/**
* The DOM element to render as the Flex. Defaults to `div`.
*/
as?: 'div' | 'span' | 'ul' | 'ol' | 'li' | 'dl';
/**
* Used to align children along the main axis.
*/
justifyContent?: JustifyContent;
/**
* Used to align children along the cross axis.
*/
alignItems?: AlignItems;
/**
* Represents the space between each child.
*/
columnGap?: Space;
/**
* Represents the space between each child.
*/
gap?: Space;
/**
* Represents the space between each child.
*/
rowGap?: Space;
/**
* Represents the flex direction property of CSS flexbox.
*/
direction?: Direction;
/**
* Represents the flex wrap property of CSS flexbox.
*/
wrap?: Wrap;
/**
* Elements to be rendered inside the Flex.
*/
children: ReactNode;
/**
* Forwarded ref element.
*/
ref?: React.ComponentPropsWithRef<T>['ref'];
} & BasePrimitiveProps;
type AlignItems = keyof typeof alignItemsMap;
type JustifyContent = keyof typeof justifyContentMap;
type Direction = keyof typeof flexDirectionMap;
type Wrap = keyof typeof flexWrapMap;
declare const justifyContentMap: {
readonly start: import("@emotion/react").SerializedStyles;
readonly center: import("@emotion/react").SerializedStyles;
readonly end: import("@emotion/react").SerializedStyles;
readonly 'space-between': import("@emotion/react").SerializedStyles;
readonly 'space-around': import("@emotion/react").SerializedStyles;
readonly 'space-evenly': import("@emotion/react").SerializedStyles;
readonly stretch: import("@emotion/react").SerializedStyles;
};
declare const flexDirectionMap: {
readonly column: import("@emotion/react").SerializedStyles;
readonly row: import("@emotion/react").SerializedStyles;
};
declare const flexWrapMap: {
readonly wrap: import("@emotion/react").SerializedStyles;
readonly nowrap: import("@emotion/react").SerializedStyles;
};
declare const alignItemsMap: {
readonly start: import("@emotion/react").SerializedStyles;
readonly center: import("@emotion/react").SerializedStyles;
readonly baseline: import("@emotion/react").SerializedStyles;
readonly end: import("@emotion/react").SerializedStyles;
readonly stretch: import("@emotion/react").SerializedStyles;
};
/**
* __Flex__
*
* `Flex` is a primitive component that implements the CSS Flexbox API.
*
* - [Examples](https://atlassian.design/components/primitives/flex/examples)
* - [Code](https://atlassian.design/components/primitives/flex/code)
*
* @example
* ```tsx
* import { Flex, Box } from '@atlaskit/primitives'
*
* const Component = () => (
* <Flex direction="column">
* <Box padding="space.100" backgroundColor="neutral"></Box>
* <Box padding="space.100" backgroundColor="neutral"></Box>
* </Flex>
* )
* ```
*/
declare const Flex: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<FlexProps<ElementType>, "ref"> & import("react").RefAttributes<any>>>;
export default Flex;