mirotone-react
Version:
Mirotone React is a component library for the Mirotone Design System, offering a range of components and utilities to speed up development for Miro. It draws inspiration from Mirotone CSS and Miro UI Components.
660 lines (579 loc) • 31.9 kB
TypeScript
import * as _radix_ui_react_dropdown_menu from '@radix-ui/react-dropdown-menu';
import { DropdownMenuContentProps, DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
import * as react from 'react';
import { ComponentProps, ReactNode, CSSProperties, PropsWithChildren } from 'react';
import * as _radix_ui_react_tooltip from '@radix-ui/react-tooltip';
import { TooltipProviderProps, TooltipProps as TooltipProps$1, TooltipContentProps } from '@radix-ui/react-tooltip';
type DropdownContentSize = 'small' | 'medium' | 'large';
type DropdownProps = Omit<ComponentProps<'div'>, 'ref'> & {
size?: DropdownContentSize;
side?: DropdownMenuContentProps['side'];
open?: DropdownMenuProps['open'];
onOpenChange?: DropdownMenuProps['onOpenChange'];
trigger: ReactNode;
};
type DropdownItemProps = Omit<ComponentProps<'div'>, 'ref' | 'onSelect'> & {
disableCloseOnSelect?: boolean;
onSelect?: () => void;
};
type DropdownDividerProps = Omit<ComponentProps<'hr'>, 'children' | 'ref'>;
declare const Dropdown: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
size?: DropdownContentSize;
side?: _radix_ui_react_dropdown_menu.DropdownMenuContentProps["side"];
open?: _radix_ui_react_dropdown_menu.DropdownMenuProps["open"];
onOpenChange?: _radix_ui_react_dropdown_menu.DropdownMenuProps["onOpenChange"];
trigger: react.ReactNode;
} & react.RefAttributes<HTMLDivElement>>;
declare const DropdownButton: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
size?: ButtonSize;
variant?: ButtonVariant;
isDisabled?: boolean;
isLoading?: boolean;
gap?: react.CSSProperties["gap"];
} & react.RefAttributes<HTMLButtonElement>>;
declare const DropdownDivider: react.ForwardRefExoticComponent<DropdownDividerProps & react.RefAttributes<HTMLHRElement>>;
declare const DropdownItem: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "onSelect"> & {
disableCloseOnSelect?: boolean;
onSelect?: () => void;
} & react.RefAttributes<HTMLDivElement>>;
type DismissableBadgeVariant = 'primary' | 'secondary';
type DismissableBadgeProps = Omit<ComponentProps<'div'>, 'ref'> & {
rounded?: boolean;
variant?: DismissableBadgeVariant;
onClose?: () => void;
};
declare const DismissableBadge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
rounded?: boolean;
variant?: DismissableBadgeVariant;
onClose?: () => void;
} & react.RefAttributes<HTMLDivElement>>;
type TooltipSize = 'small' | 'medium' | 'large';
type TooltipProps = Omit<ComponentProps<'div'>, 'ref'> & {
delayDuration?: TooltipProviderProps['delayDuration'];
open?: TooltipProps$1['open'];
onOpenChange?: TooltipProps$1['onOpenChange'];
side?: TooltipContentProps['side'];
size?: TooltipSize;
disableCloseOnOutside?: boolean;
trigger: ReactNode;
};
declare const Tooltip: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
delayDuration?: _radix_ui_react_tooltip.TooltipProviderProps["delayDuration"];
open?: _radix_ui_react_tooltip.TooltipProps["open"];
onOpenChange?: _radix_ui_react_tooltip.TooltipProps["onOpenChange"];
side?: _radix_ui_react_tooltip.TooltipContentProps["side"];
size?: TooltipSize;
disableCloseOnOutside?: boolean;
trigger: react.ReactNode;
} & react.RefAttributes<HTMLDivElement>>;
declare const borderRadius: {
readonly small: "var(--border-radius-small)";
readonly medium: "var(--border-radius-medium)";
readonly large: "var(--border-radius-large)";
readonly xlarge: "var(--border-radius-xlarge)";
readonly xxlarge: "var(--border-radius-xxlarge)";
readonly circle: "var(--border-radius-circle)";
};
declare const color: {
readonly primaryText: "var(--primary-text-color)";
readonly secondaryText: "var(--secondary-text-color)";
readonly primaryActionColor: "var(--primary-action-color)";
readonly blue: {
readonly 100: "var(--blue100)";
readonly 200: "var(--blue200)";
readonly 300: "var(--blue300)";
readonly 400: "var(--blue400)";
readonly 500: "var(--blue500)";
readonly 600: "var(--blue600)";
readonly 700: "var(--blue700)";
readonly 800: "var(--blue800)";
readonly 900: "var(--blue900)";
};
readonly indigo: {
readonly 50: "var(--indigo50)";
readonly 100: "var(--indigo100)";
readonly 200: "var(--indigo200)";
readonly 300: "var(--indigo300)";
readonly 400: "var(--indigo400)";
readonly 500: "var(--indigo500)";
readonly 600: "var(--indigo600)";
readonly 700: "var(--indigo700)";
};
readonly indigoAlpha: {
readonly 4: "var(--indigoAlpha4)";
readonly 6: "var(--indigoAlpha6)";
readonly 8: "var(--indigoAlpha8)";
readonly 12: "var(--indigoAlpha12)";
readonly 20: "var(--indigoAlpha20)";
readonly 40: "var(--indigoAlpha40)";
readonly 80: "var(--indigoAlpha80)";
};
readonly green: {
readonly 100: "var(--green100)";
readonly 400: "var(--green400)";
readonly 700: "var(--green700)";
readonly 800: "var(--green800)";
};
readonly black: "var(--black)";
readonly blackAlpha: {
readonly 20: "var(--blackAlpha20)";
readonly 40: "var(--blackAlpha40)";
readonly 60: "var(--blackAlpha60)";
readonly 80: "var(--blackAlpha80)";
};
readonly red: {
readonly 50: "var(--red50)";
readonly 100: "var(--red100)";
readonly 400: "var(--red400)";
readonly 600: "var(--red600)";
readonly 700: "var(--red700)";
readonly 800: "var(--red800)";
readonly 900: "var(--red900)";
};
readonly yellow: {
readonly 100: "var(--yellow100)";
readonly 400: "var(--yellow400)";
readonly 700: "var(--yellow700)";
};
readonly white: "var(--white)";
readonly whiteAlpha: {
readonly 20: "var(--whiteAlpha20)";
readonly 40: "var(--whiteAlpha40)";
readonly 80: "var(--whiteAlpha80)";
};
};
declare const space: {
readonly xxxsmall: "var(--space-xxxsmall)";
readonly xxsmall: "var(--space-xxsmall)";
readonly xsmall: "var(--space-xsmall)";
readonly small: "var(--space-small)";
readonly medium: "var(--space-medium)";
readonly large: "var(--space-large)";
readonly xlarge: "var(--space-xlarge)";
readonly xxlarge: "var(--space-xxlarge)";
readonly xxxlarge: "var(--space-xxxlarge)";
};
declare const typography: {
readonly fontWeight: {
readonly normal: "var(--font-weight-normal)";
readonly medium: "var(--font-weight-medium)";
readonly bold: "var(--font-weight-bold)";
readonly black: "var(--font-weight-black)";
};
readonly fontSize: {
readonly small: "var(--font-size-small)";
readonly medium: "var(--font-size-medium)";
readonly large: "var(--font-size-large)";
readonly xlarge: "var(--font-size-xlarge)";
readonly xxlarge: "var(--font-size-xxlarge)";
readonly xxxlarge: "var(--font-size-xxxlarge)";
};
readonly font: {
readonly header: "var(--header-font)";
readonly body: "var(--body-font)";
};
};
type BorderRadius = (typeof borderRadius)[keyof typeof borderRadius];
type Blue = (typeof color)['blue'][keyof (typeof color)['blue']];
type Indigo = (typeof color)['indigo'][keyof (typeof color)['indigo']];
type IndigoAlpha = (typeof color)['indigoAlpha'][keyof (typeof color)['indigoAlpha']];
type Green = (typeof color)['green'][keyof (typeof color)['green']];
type Black = (typeof color)['black'];
type BlackAlpha = (typeof color)['blackAlpha'][keyof (typeof color)['blackAlpha']];
type Red = (typeof color)['red'][keyof (typeof color)['red']];
type Yellow = (typeof color)['yellow'][keyof (typeof color)['yellow']];
type White = (typeof color)['white'];
type WhiteAlpha = (typeof color)['whiteAlpha'][keyof (typeof color)['whiteAlpha']];
type PrimaryText = (typeof color)['primaryText'];
type PrimaryActionColor = (typeof color)['primaryActionColor'];
type SecondaryText = (typeof color)['secondaryText'];
type Colors = Blue | Indigo | IndigoAlpha | Green | Black | BlackAlpha | Red | Yellow | White | WhiteAlpha | PrimaryText | PrimaryActionColor | SecondaryText;
type FontWeight = (typeof typography)['fontWeight'][keyof (typeof typography)['fontWeight']];
type FontSize = (typeof typography)['fontSize'][keyof (typeof typography)['fontSize']];
type Font = (typeof typography)['font'][keyof (typeof typography)['font']];
type Spacing = (typeof space)[keyof typeof space];
type AppCardProps = Omit<ComponentProps<'div'>, 'ref'> & {
accentColor?: Colors;
};
type AppCardTitleProps = Omit<ComponentProps<'h1'>, 'ref'>;
type AppCardDescriptionProps = Omit<ComponentProps<'h1'>, 'ref'>;
type AppCardBodyProps = Omit<ComponentProps<'div'>, 'ref'>;
type AppCardTagsProps = Omit<ComponentProps<'div'>, 'ref'>;
declare const AppCardTitle: react.ForwardRefExoticComponent<AppCardTitleProps & react.RefAttributes<HTMLHeadingElement>>;
declare const AppCardTags: react.ForwardRefExoticComponent<AppCardTagsProps & react.RefAttributes<HTMLDivElement>>;
declare const AppCardDescription: react.ForwardRefExoticComponent<AppCardDescriptionProps & react.RefAttributes<HTMLHeadingElement>>;
declare const AppCardBody: react.ForwardRefExoticComponent<AppCardBodyProps & react.RefAttributes<HTMLDivElement>>;
declare const AppCard: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
accentColor?: Colors;
} & react.RefAttributes<HTMLDivElement>>;
type ButtonSize = 'small' | 'medium' | 'large';
type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger';
type ButtonProps = Omit<ComponentProps<'button'>, 'ref'> & {
size?: ButtonSize;
variant?: ButtonVariant;
isDisabled?: boolean;
isLoading?: boolean;
gap?: CSSProperties['gap'];
};
declare const Button: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
size?: ButtonSize;
variant?: ButtonVariant;
isDisabled?: boolean;
isLoading?: boolean;
gap?: react.CSSProperties["gap"];
} & react.RefAttributes<HTMLButtonElement>>;
declare const Checkbox: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "children" | "onChange" | "value"> & {
label?: string;
value?: boolean;
onChange?: (value: boolean) => void;
} & react.RefAttributes<HTMLInputElement>>;
type CheckboxProps = Omit<ComponentProps<'input'>, 'children' | 'onChange' | 'value' | 'ref'> & {
label?: string;
value?: boolean;
onChange?: (value: boolean) => void;
};
type DividerProps = Omit<ComponentProps<'hr'>, 'children' | 'ref'>;
declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLHRElement>>;
type FormGroupSize = 'small' | 'medium';
type FormGroupStatus = 'error' | 'success';
type FormGroupProps = Omit<ComponentProps<'div'>, 'ref'> & {
size?: FormGroupSize;
isDisabled?: boolean;
status?: FormGroupStatus;
};
declare const FormGroup: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
size?: FormGroupSize;
isDisabled?: boolean;
status?: FormGroupStatus;
} & react.RefAttributes<HTMLDivElement>>;
type IconSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
type IconProps = Omit<ComponentProps<'span'>, 'ref'> & {
size?: IconSize;
name: Icons;
};
declare const peopleIcons: readonly ["eye-closed", "shared-with", "team", "user", "author-cursor-view", "user-load", "eye", "comment-feedback"];
declare const objectIcons: readonly ["photo", "folder", "upload", "help", "link", "unlink", "settings", "pin", "analytics", "deactivated", "doc-note", "security", "billing", "filters", "image", "invitation", "trash", "help-question", "search", "magnet", "bell", "public", "sound-on", "envelope", "play", "lock", "unlock", "plug", "mic-on", "mic-off", "activity", "stop", "presentation", "sound-off", "map", "calendar", "home", "video", "learn", "thumbs-up", "thumbs-down", "backup", "pdf", "sticky-recognition", "boards", "app-boilerplate", "google", "tag"];
declare const symbolIcons: readonly ["parameters-vertical", "text-heading-one", "text-heading-two", "text-italic-bui", "text-underline-bui", "text-strikethrough-bui", "bold-bui", "bui", "numbered-list", "align-left", "info", "checkbox", "warning", "spreadsheets", "tile", "bullet-list", "list", "card-list", "layers", "grid", "parameters", "drag", "unmerge", "ungroup", "merge", "group", "duplicate", "screen-sharing", "more", "comment-add", "comments", "comment-close", "comment-eye", "download", "export", "key", "close", "collapse", "expand", "redo", "undo", "back-1", "back", "arrows-down", "arrows-up", "arrows-left", "arrows-right", "arrow-up", "arrow-down", "arrow-left", "arrow-right", "minus", "plus", "add-column-right", "add-row-bottom", "cursor", "cursor-user", "hand", "logout", "fit", "refresh", "embed"];
declare const boardObjectIcons: readonly ["arrow-line-shape", "arrow-line", "arrow-shape", "frames", "frame", "comment", "parallelogram", "eraser", "rounded", "star", "text", "text-plus", "sticky", "sticky-two", "sticky-bulk", "triangle", "rhombus", "line", "edit", "babble", "chat", "rectangle", "oval", "mockup", "templates", "card", "shapes", "timer"];
declare const frameIcons: readonly ["4x3", "16x9", "custom", "document"];
declare const deviceIcons: readonly ["ipad", "iphone", "phone", "sq", "tablet", "web"];
declare const editorIcons: readonly ["no-color", "text-horizontally", "text-along"];
type PeopleIcons = (typeof peopleIcons)[number];
type ObjectIcons = (typeof objectIcons)[number];
type SymbolIcons = (typeof symbolIcons)[number];
type BoardObjectIcons = (typeof boardObjectIcons)[number];
type FrameIcons = (typeof frameIcons)[number];
type DeviceIcons = (typeof deviceIcons)[number];
type EditorIcons = (typeof editorIcons)[number];
type Icons = PeopleIcons | ObjectIcons | SymbolIcons | BoardObjectIcons | FrameIcons | DeviceIcons;
declare const Icon: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
size?: IconSize;
name: Icons;
} & react.RefAttributes<HTMLSpanElement>>;
type InputSize = 'small' | 'medium';
type FlexModifier = '1/4' | '2/4' | '3/4' | '4/4';
type InputProps = Omit<ComponentProps<'input'>, 'value' | 'onChange' | 'children' | 'size' | 'ref'> & {
size?: InputSize;
value?: string;
onChange?: (value: string) => void;
isDisabled?: boolean;
isReadOnly?: boolean;
flexModifier?: FlexModifier;
};
type InputLabelProps = ComponentProps<'label'>;
type InputDecorationProps = ComponentProps<'span'> & {
borderLeft?: boolean;
borderRight?: boolean;
flexModifier?: FlexModifier;
};
type InputStatusTextProps = ComponentProps<'div'>;
type InputGroupTextProps = ComponentProps<'div'>;
declare const Input: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "children" | "onChange" | "size" | "value"> & {
size?: InputSize;
value?: string;
onChange?: (value: string) => void;
isDisabled?: boolean;
isReadOnly?: boolean;
flexModifier?: FlexModifier;
} & react.RefAttributes<HTMLInputElement>>;
declare const InputDecoration: react.ForwardRefExoticComponent<Omit<InputDecorationProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
declare const InputGroup: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const InputLabel: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & react.RefAttributes<HTMLLabelElement>>;
declare const InputStatusText: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
type LabelVariant = 'info' | 'warning';
type LabelProps = Omit<ComponentProps<'span'>, 'ref'> & {
variant?: LabelVariant;
};
declare const Label: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
variant?: LabelVariant;
} & react.RefAttributes<HTMLSpanElement>>;
type LinkVariant = 'primary' | 'danger' | 'text';
type LinkProps = Omit<ComponentProps<'a'>, 'ref'> & {
variant?: LinkVariant;
};
declare const Link: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
variant?: LinkVariant;
} & react.RefAttributes<HTMLAnchorElement>>;
declare const RadioButton: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "children" | "onChange" | "value"> & {
label?: string;
value?: boolean;
onChange?: (value: boolean) => void;
} & react.RefAttributes<HTMLInputElement>>;
type RadioButtonProps = Omit<ComponentProps<'input'>, 'children' | 'onChange' | 'value' | 'ref'> & {
label?: string;
value?: boolean;
onChange?: (value: boolean) => void;
};
type SelectSize = 'small' | 'medium';
type SelectProps = Omit<ComponentProps<'select'>, 'onChange' | 'value' | 'size' | 'ref'> & {
value?: string;
onChange?: (value: string) => void;
size?: SelectSize;
isDisabled?: boolean;
};
type SelectOptionProps = Omit<ComponentProps<'option'>, 'ref'>;
type SelectLabelProps = Omit<ComponentProps<'label'>, 'ref'>;
declare const Select: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref" | "onChange" | "size" | "value"> & {
value?: string;
onChange?: (value: string) => void;
size?: SelectSize;
isDisabled?: boolean;
} & react.RefAttributes<HTMLSelectElement>>;
declare const SelectOption: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLOptionElement>>;
type SpinnerSize = 'small' | 'medium' | 'large';
type SpinnerProps = Omit<ComponentProps<'span'>, 'ref'> & {
size?: SpinnerSize;
spinnerColor?: Colors;
};
declare const Spinner: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
size?: SpinnerSize;
spinnerColor?: Colors;
} & react.RefAttributes<SVGSVGElement>>;
declare const Table: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
headIsSticky?: boolean;
} & react.RefAttributes<HTMLTableElement>>;
type TableProps = Omit<ComponentProps<'table'>, 'ref'> & {
headIsSticky?: boolean;
};
type TableHeadProps = Omit<ComponentProps<'thead'>, 'ref'>;
type TableHeadCellProps = Omit<ComponentProps<'th'>, 'ref'>;
type TableBodyProps = Omit<ComponentProps<'tbody'>, 'ref'>;
type TableRowProps = Omit<ComponentProps<'tr'>, 'ref'>;
type TableCellProps = Omit<ComponentProps<'td'>, 'ref'>;
declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableSectionElement>>;
declare const TableHeadCell: react.ForwardRefExoticComponent<TableHeadCellProps & react.RefAttributes<HTMLTableCellElement>>;
declare const TableBody: react.ForwardRefExoticComponent<TableBodyProps & react.RefAttributes<HTMLTableSectionElement>>;
declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
type TabProps = PropsWithChildren<{
id: string;
badge?: string;
}>;
type TabsProps = Omit<ComponentProps<'div'>, 'children' | 'onClick' | 'ref'> & {
activeIndex?: number;
onClick?: (index: number) => void;
tabs: TabProps[];
};
declare const Tabs: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "children" | "onClick"> & {
activeIndex?: number;
onClick?: (index: number) => void;
tabs: TabProps[];
} & react.RefAttributes<HTMLDivElement>>;
type BaseTagProps = {
icon?: Icons;
textColor?: Colors;
backgroundColor?: Colors;
};
type TagProps = Omit<ComponentProps<'span'>, 'ref'> & BaseTagProps;
type LinkTagProps = Omit<ComponentProps<'a'>, 'ref'> & BaseTagProps;
type TagButtonProps = Omit<ComponentProps<'button'>, 'children' | 'ref'> & {
icon: Icons;
};
type TagImageProps = Omit<ComponentProps<'img'>, 'children' | 'ref'>;
declare const LinkTag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & BaseTagProps & react.RefAttributes<HTMLAnchorElement>>;
declare const Tag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & BaseTagProps & react.RefAttributes<HTMLSpanElement>>;
declare const TagButton: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref" | "children"> & {
icon: Icons;
} & react.RefAttributes<HTMLButtonElement>>;
declare const TagImage: react.ForwardRefExoticComponent<TagImageProps & react.RefAttributes<HTMLImageElement>>;
type TextAreaSize = 'small' | 'medium';
type TextAreaProps = Omit<ComponentProps<'textarea'>, 'value' | 'onChange' | 'children' | 'size' | 'ref'> & {
size?: TextAreaSize;
value?: string;
onChange?: (value: string) => void;
isDisabled?: boolean;
isReadOnly?: boolean;
};
declare const TextArea: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref" | "children" | "onChange" | "size" | "value"> & {
size?: TextAreaSize;
value?: string;
onChange?: (value: string) => void;
isDisabled?: boolean;
isReadOnly?: boolean;
} & react.RefAttributes<HTMLTextAreaElement>>;
declare const Toggle: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "children" | "onChange" | "value"> & {
label?: string;
value?: boolean;
onChange?: (value: boolean) => void;
} & react.RefAttributes<HTMLInputElement>>;
type ToggleProps = Omit<ComponentProps<'input'>, 'children' | 'onChange' | 'value' | 'ref'> & {
label?: string;
value?: boolean;
onChange?: (value: boolean) => void;
};
type CenteredProps = Omit<ComponentProps<'div'>, 'ref'>;
declare const Centered: react.ForwardRefExoticComponent<CenteredProps & react.RefAttributes<HTMLDivElement>>;
type FlexProps = ComponentProps<'div'> & {
alignContent?: CSSProperties['alignContent'];
alignItems?: CSSProperties['alignItems'];
columnGap?: CSSProperties['columnGap'];
flexDirection?: CSSProperties['flexDirection'];
flexFlow?: CSSProperties['flexFlow'];
flexWrap?: CSSProperties['flexWrap'];
gap?: CSSProperties['gap'];
justifyContent?: CSSProperties['justifyContent'];
rowGap?: CSSProperties['rowGap'];
};
declare const Flex: react.ForwardRefExoticComponent<Omit<FlexProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
type GridColumn = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type GridProps = Omit<ComponentProps<'div'>, 'ref'>;
type GridItemsProps = Omit<ComponentProps<'div'>, 'ref'> & {
colStart: GridColumn;
colEnd: GridColumn;
};
declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
declare const GridItem: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
colStart: GridColumn;
colEnd: GridColumn;
} & react.RefAttributes<HTMLDivElement>>;
declare const tokens: {
readonly color: {
readonly primaryText: "var(--primary-text-color)";
readonly secondaryText: "var(--secondary-text-color)";
readonly primaryActionColor: "var(--primary-action-color)";
readonly blue: {
readonly 100: "var(--blue100)";
readonly 200: "var(--blue200)";
readonly 300: "var(--blue300)";
readonly 400: "var(--blue400)";
readonly 500: "var(--blue500)";
readonly 600: "var(--blue600)";
readonly 700: "var(--blue700)";
readonly 800: "var(--blue800)";
readonly 900: "var(--blue900)";
};
readonly indigo: {
readonly 50: "var(--indigo50)";
readonly 100: "var(--indigo100)";
readonly 200: "var(--indigo200)";
readonly 300: "var(--indigo300)";
readonly 400: "var(--indigo400)";
readonly 500: "var(--indigo500)";
readonly 600: "var(--indigo600)";
readonly 700: "var(--indigo700)";
};
readonly indigoAlpha: {
readonly 4: "var(--indigoAlpha4)";
readonly 6: "var(--indigoAlpha6)";
readonly 8: "var(--indigoAlpha8)";
readonly 12: "var(--indigoAlpha12)";
readonly 20: "var(--indigoAlpha20)";
readonly 40: "var(--indigoAlpha40)";
readonly 80: "var(--indigoAlpha80)";
};
readonly green: {
readonly 100: "var(--green100)";
readonly 400: "var(--green400)";
readonly 700: "var(--green700)";
readonly 800: "var(--green800)";
};
readonly black: "var(--black)";
readonly blackAlpha: {
readonly 20: "var(--blackAlpha20)";
readonly 40: "var(--blackAlpha40)";
readonly 60: "var(--blackAlpha60)";
readonly 80: "var(--blackAlpha80)";
};
readonly red: {
readonly 50: "var(--red50)";
readonly 100: "var(--red100)";
readonly 400: "var(--red400)";
readonly 600: "var(--red600)";
readonly 700: "var(--red700)";
readonly 800: "var(--red800)";
readonly 900: "var(--red900)";
};
readonly yellow: {
readonly 100: "var(--yellow100)";
readonly 400: "var(--yellow400)";
readonly 700: "var(--yellow700)";
};
readonly white: "var(--white)";
readonly whiteAlpha: {
readonly 20: "var(--whiteAlpha20)";
readonly 40: "var(--whiteAlpha40)";
readonly 80: "var(--whiteAlpha80)";
};
};
readonly typography: {
readonly fontWeight: {
readonly normal: "var(--font-weight-normal)";
readonly medium: "var(--font-weight-medium)";
readonly bold: "var(--font-weight-bold)";
readonly black: "var(--font-weight-black)";
};
readonly fontSize: {
readonly small: "var(--font-size-small)";
readonly medium: "var(--font-size-medium)";
readonly large: "var(--font-size-large)";
readonly xlarge: "var(--font-size-xlarge)";
readonly xxlarge: "var(--font-size-xxlarge)";
readonly xxxlarge: "var(--font-size-xxxlarge)";
};
readonly font: {
readonly header: "var(--header-font)";
readonly body: "var(--body-font)";
};
};
readonly space: {
readonly xxxsmall: "var(--space-xxxsmall)";
readonly xxsmall: "var(--space-xxsmall)";
readonly xsmall: "var(--space-xsmall)";
readonly small: "var(--space-small)";
readonly medium: "var(--space-medium)";
readonly large: "var(--space-large)";
readonly xlarge: "var(--space-xlarge)";
readonly xxlarge: "var(--space-xxlarge)";
readonly xxxlarge: "var(--space-xxxlarge)";
};
readonly borderRadius: {
readonly small: "var(--border-radius-small)";
readonly medium: "var(--border-radius-medium)";
readonly large: "var(--border-radius-large)";
readonly xlarge: "var(--border-radius-xlarge)";
readonly xxlarge: "var(--border-radius-xxlarge)";
readonly circle: "var(--border-radius-circle)";
};
};
type HeadingLevel = 1 | 2 | 3 | 4;
type HeadingProps = ComponentProps<'h1'> & {
level?: HeadingLevel;
fontColor?: Colors;
};
declare const Heading: react.ForwardRefExoticComponent<Omit<HeadingProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
type ParagraphSize = keyof typeof typography.fontSize;
type ParagraphProps = ComponentProps<'p'> & {
size?: ParagraphSize;
fontWeight?: FontWeight;
fontColor?: Colors;
};
declare const Paragraph: react.ForwardRefExoticComponent<Omit<ParagraphProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
type TextSize = keyof typeof typography.fontSize;
type TextProps = ComponentProps<'span'> & {
size?: TextSize;
fontWeight?: FontWeight | '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
fontColor?: Colors | '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
};
declare const Text: react.ForwardRefExoticComponent<Omit<TextProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
export { AppCard, AppCardBody, AppCardDescription, AppCardTags, AppCardTitle, Button, Centered, Checkbox, DismissableBadge, Divider, Dropdown, DropdownButton, DropdownDivider, DropdownItem, Flex, FormGroup, Grid, GridItem, Heading, Icon, Input, InputDecoration, InputGroup, InputLabel, InputStatusText, Label, Link, LinkTag, Paragraph, RadioButton, Select, SelectOption, Spinner, Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow, Tabs, Tag, TagButton, TagImage, Text, TextArea, Toggle, Tooltip, boardObjectIcons, deviceIcons, editorIcons, frameIcons, objectIcons, peopleIcons, symbolIcons, tokens };
export type { AppCardBodyProps, AppCardDescriptionProps, AppCardProps, AppCardTagsProps, AppCardTitleProps, BaseTagProps, Black, BlackAlpha, Blue, BoardObjectIcons, BorderRadius, ButtonProps, ButtonSize, ButtonVariant, CenteredProps, CheckboxProps, Colors, DeviceIcons, DismissableBadgeProps, DismissableBadgeVariant, DividerProps, DropdownContentSize, DropdownDividerProps, DropdownItemProps, DropdownProps, EditorIcons, FlexModifier, FlexProps, Font, FontSize, FontWeight, FormGroupProps, FormGroupSize, FormGroupStatus, FrameIcons, Green, GridColumn, GridItemsProps, GridProps, HeadingLevel, HeadingProps, IconProps, IconSize, Icons, Indigo, IndigoAlpha, InputDecorationProps, InputGroupTextProps, InputLabelProps, InputProps, InputSize, InputStatusTextProps, LabelProps, LabelVariant, LinkProps, LinkTagProps, LinkVariant, ObjectIcons, ParagraphProps, ParagraphSize, PeopleIcons, PrimaryActionColor, PrimaryText, RadioButtonProps, Red, SecondaryText, SelectLabelProps, SelectOptionProps, SelectProps, SelectSize, Spacing, SpinnerProps, SpinnerSize, SymbolIcons, TabProps, TableBodyProps, TableCellProps, TableHeadCellProps, TableHeadProps, TableProps, TableRowProps, TabsProps, TagButtonProps, TagImageProps, TagProps, TextAreaProps, TextAreaSize, TextProps, TextSize, ToggleProps, TooltipProps, TooltipSize, White, WhiteAlpha, Yellow };