monday-ui-react-core

import React from "react"; import { BackgroundColor, Border, BorderColor, Color, Margin, MarginBottom, MarginEnd, MarginStart, MarginTop, MarginX, MarginY, Padding, PaddingBottom, PaddingEnd, PaddingStart, PaddingTop, PaddingX, PaddingY, Rounded, Shadow } from "./BoxConstants"; import { ValueOf, VibeComponent, VibeComponentProps, ElementContent } from "../../types"; export interface BoxProps extends VibeComponentProps { elementType?: keyof JSX.IntrinsicElements | string; children?: ElementContent; disabled?: boolean; border?: ValueOf<Border>; borderColor?: ValueOf<BorderColor>; rounded?: ValueOf<Rounded>; shadow?: ValueOf<Shadow>; margin?: ValueOf<Margin>; marginX?: ValueOf<MarginX>; marginY?: ValueOf<MarginY>; marginTop?: ValueOf<MarginTop>; marginEnd?: ValueOf<MarginEnd>; marginBottom?: ValueOf<MarginBottom>; marginStart?: ValueOf<MarginStart>; padding?: ValueOf<Padding>; paddingX?: ValueOf<PaddingX>; paddingY?: ValueOf<PaddingY>; paddingTop?: ValueOf<PaddingTop>; paddingEnd?: ValueOf<PaddingEnd>; paddingBottom?: ValueOf<PaddingBottom>; paddingStart?: ValueOf<PaddingStart>; backgroundColor?: ValueOf<BackgroundColor>; textColor?: ValueOf<Color>; /** * TODO: make default in next major version */ scrollable?: boolean; style?: React.CSSProperties; } declare const _default: ((VibeComponent<BoxProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{ borders: Readonly<{ DEFAULT: string; }>; borderColors: Readonly<{ UI_BORDER_COLOR: string; LAYOUT_BORDER_COLOR: string; }>; roundeds: Readonly<{ SMALL: string; MEDIUM: string; BIG: string; }>; shadows: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; }>; margins: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginXs: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginYs: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginTops: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginEnds: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginBottoms: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginStarts: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddings: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingXs: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingYs: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingTops: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingEnds: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingBottoms: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingStarts: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; backgroundColors: Readonly<{ PRIMARY_BACKGROUND_COLOR: string; SECONDARY_BACKGROUND_COLOR: string; GREY_BACKGROUND_COLOR: string; ALL_GREY_BACKGROUND_COLOR: string; INVERTED_COLOR_BACKGROUND: string; }>; textColors: Readonly<{ PRIMARY_TEXT_COLOR: string; TEXT_COLOR_ON_INVERTED: string; SECONDARY_TEXT_COLOR: string; }>; }>) | (React.FC<BoxProps & React.RefAttributes<HTMLElement>> & Partial<{ borders: Readonly<{ DEFAULT: string; }>; borderColors: Readonly<{ UI_BORDER_COLOR: string; LAYOUT_BORDER_COLOR: string; }>; roundeds: Readonly<{ SMALL: string; MEDIUM: string; BIG: string; }>; shadows: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; }>; margins: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginXs: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginYs: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginTops: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginEnds: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginBottoms: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginStarts: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddings: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingXs: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingYs: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingTops: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingEnds: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingBottoms: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingStarts: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; backgroundColors: Readonly<{ PRIMARY_BACKGROUND_COLOR: string; SECONDARY_BACKGROUND_COLOR: string; GREY_BACKGROUND_COLOR: string; ALL_GREY_BACKGROUND_COLOR: string; INVERTED_COLOR_BACKGROUND: string; }>; textColors: Readonly<{ PRIMARY_TEXT_COLOR: string; TEXT_COLOR_ON_INVERTED: string; SECONDARY_TEXT_COLOR: string; }>; }>)) & { borders: Readonly<{ DEFAULT: string; }>; borderColors: Readonly<{ UI_BORDER_COLOR: string; LAYOUT_BORDER_COLOR: string; }>; roundeds: Readonly<{ SMALL: string; MEDIUM: string; BIG: string; }>; shadows: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; }>; margins: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginXs: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginYs: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginTops: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginEnds: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginBottoms: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; marginStarts: Readonly<{ AUTO: string; XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddings: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingXs: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingYs: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingTops: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingEnds: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingBottoms: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; paddingStarts: Readonly<{ XS: string; SMALL: string; MEDIUM: string; LARGE: string; XL: string; XXL: string; XXXL: string; }>; backgroundColors: Readonly<{ PRIMARY_BACKGROUND_COLOR: string; SECONDARY_BACKGROUND_COLOR: string; GREY_BACKGROUND_COLOR: string; ALL_GREY_BACKGROUND_COLOR: string; INVERTED_COLOR_BACKGROUND: string; }>; textColors: Readonly<{ PRIMARY_TEXT_COLOR: string; TEXT_COLOR_ON_INVERTED: string; SECONDARY_TEXT_COLOR: string; }>; }; export default _default;