cherry-styled-components
Version:
Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.
30 lines (29 loc) • 1.13 kB
TypeScript
import { default as React } from 'react';
import { Theme } from './utils';
type JustifyContentType = "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
type GapType = number | "none";
interface FlexProps extends React.AllHTMLAttributes<FlexProps> {
children?: React.ReactNode;
$justifyContent?: JustifyContentType;
$xsJustifyContent?: JustifyContentType;
$smJustifyContent?: JustifyContentType;
$mdJustifyContent?: JustifyContentType;
$lgJustifyContent?: JustifyContentType;
$xlJustifyContent?: JustifyContentType;
$xxlJustifyContent?: JustifyContentType;
$xxxlJustifyContent?: JustifyContentType;
$wrap?: "wrap" | "nowrap" | "wrap-reverse";
$gap?: GapType;
$xsGap?: GapType;
$smGap?: GapType;
$mdGap?: GapType;
$lgGap?: GapType;
$xlGap?: GapType;
$xxlGap?: GapType;
$xxxlGap?: GapType;
$direction?: "row" | "column" | "row-reverse" | "column-reverse";
$fullWidth?: boolean;
theme?: Theme;
}
declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
export { Flex };