@dolthub/react-components/dist/index.d.ts

A collection of React components for common tasks

export { FilterOptionOption } from 'react-select/dist/declarations/src/filters';
import React$1, { ButtonHTMLAttributes, ReactNode, ChangeEvent, SyntheticEvent, ReactElement } from 'react';
import { PopupProps } from 'reactjs-popup/dist/types.d';
export { PopupProps } from 'reactjs-popup/dist/types.d';
import { Maybe } from '@dolthub/web-utils';
import { Props as Props$B, StylesConfig, GroupBase, OnChangeValue, ActionMeta } from 'react-select';
import { AsyncProps as AsyncProps$1 } from 'react-select/async';
import { ITooltip } from 'react-tooltip';
import { Config } from 'tailwindcss';

declare function Btn({ children, className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React$1.JSX.Element;

type VariantProps = {
    red?: boolean;
    green?: boolean;
    dark?: boolean;
    pill?: boolean;
    white?: boolean;
    gradient?: boolean;
    size?: "small" | "medium" | "large";
};
type ButtonProps$1 = ButtonHTMLAttributes<HTMLButtonElement>;
type Props$A = ButtonProps$1 & VariantProps;
declare function Button({ children, className, red, green, dark, pill, white, gradient, ...props }: Props$A): React$1.JSX.Element;
declare namespace Button {
    var Outlined: ({ children, className, pill, ...props }: ButtonProps$1 & {
        pill?: boolean;
    }) => React$1.JSX.Element;
    var Link: ({ children, className, red, green, dark, underlined, ...props }: LinkProps) => React$1.JSX.Element;
    var Group: ({ children, className }: GroupProps) => React$1.JSX.Element;
}
type LinkProps = Props$A & {
    underlined?: boolean;
};
type GroupProps = {
    children: React$1.ReactNode;
    className?: string;
};

declare function Popup(props: PopupProps): React$1.JSX.Element;

type Props$z = Partial<PopupProps> & {
    children: ReactNode;
    isOpen?: boolean;
    setIsOpen?: (o: boolean) => void;
    triggerText?: string;
    buttonClassName?: string;
    ["data-cy"]?: string;
};
declare function ButtonWithPopup({ children, isOpen, setIsOpen, triggerText, ...props }: Props$z): React$1.JSX.Element;

type Props$y = {
    onCancel?: () => void;
    error?: Error;
    children: ReactNode;
    className?: string;
    left?: boolean;
    stackedButton?: boolean;
    right?: boolean;
    ["data-cy"]?: string;
    cancelText?: string;
};
declare function ButtonsWithError({ children, onCancel, error, className, left, stackedButton, right, ...props }: Props$y): React$1.JSX.Element;

type Props$x = {
    children: ReactNode;
    showDropdown: boolean;
    setShowDropdown: (s: boolean) => void;
    buttonClassName: string;
    dropdownClassName?: string;
    forRow?: boolean;
    ["data-cy"]?: string;
};
declare function CellDropdown({ setShowDropdown, forRow, ...props }: Props$x): React$1.JSX.Element;

type Props$w = {
    desc: string;
    className?: string;
    maxChar?: number;
};
declare function CharCount(props: Props$w): React$1.JSX.Element;

type Props$v = {
    name: string;
    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
    checked: boolean;
    label?: string;
    description?: string;
    className?: string;
    disabled?: boolean;
    blue?: boolean;
};
declare function Checkbox({ className, blue, label, description, ...props }: Props$v): React$1.JSX.Element;

type Props$u = {
    children: ReactNode;
    className?: string;
    disabled?: boolean;
};
declare function CodeBlock({ children, className, disabled }: Props$u): React$1.JSX.Element;
declare namespace CodeBlock {
    var WithCopyButton: (props: CopyProps) => React$1.JSX.Element;
}
type CopyProps = {
    textToCopy: string;
    children?: ReactNode;
    className?: string;
    ["data-cy"]?: string;
    disabled?: boolean;
    small?: boolean;
};

type CommonProps$3 = {
    children?: ReactNode;
    ["data-cy"]?: string;
    onSubmit: (e: SyntheticEvent) => Promise<void>;
    profPic?: ReactNode;
    comment: string;
    setComment: (c: string) => void;
    inputRef?: React.RefObject<HTMLTextAreaElement | null>;
    hasMinHeight?: boolean;
    unroundBottom?: boolean;
    placeholder?: string;
    label?: string;
    maxCharCount?: number;
};

declare function CommentForm(props: CommonProps$3): React$1.JSX.Element;

type Props$t = {
    text: string;
    light?: boolean;
};
declare function CopyButton({ text, light }: Props$t): React$1.JSX.Element;

type CommonProps$2 = {
    label?: string;
    value: string;
    hideValue?: boolean;
    children?: ReactNode;
    blue?: boolean;
    help?: ReactNode;
    blur?: boolean;
    labelClassName?: string;
    className?: string;
    smallValue?: boolean;
    vertical?: boolean;
    valueForHidden?: string;
};
type Props$s = CommonProps$2 & {
    buttonActive?: boolean;
    button?: ReactNode;
};
declare function FieldWithButton(props: Props$s): React$1.JSX.Element;

declare function CopyableField(props: CommonProps$2): React$1.JSX.Element;

type Props$r = {
    err?: Error;
    errString?: string;
    className?: string;
};
declare function ErrorMsg({ err, errString, className }: Props$r): React$1.JSX.Element | null;

type Props$q = {
    children: React$1.ReactNode;
    improveErrorMsgFn?: (m: string) => string;
    renderDifferentComp?: (m: string) => JSX.Element | null;
};
declare function ErrorMsgProvider({ children, improveErrorMsgFn, renderDifferentComp, }: Props$q): React$1.JSX.Element;
declare function isTimeoutError(err: string): boolean;

type Props$p = {
    href: string;
    children: ReactNode;
    className?: string;
    ["data-cy"]?: string;
};
declare function ExternalLink(props: Props$p): React$1.JSX.Element;

type TopLink = {
    href: string;
    name: string;
};
type SocialLink = {
    href: string;
    icon: ReactNode;
    label: string;
};
type LogoProps = {
    logo: ReactNode;
    version?: string;
};
type Props$o = LogoProps & {
    topLinks?: TopLink[];
    socialLinks?: SocialLink[];
    companyName: string;
    className?: string;
};
declare function Footer(props: Props$o): React$1.JSX.Element;

type Props$n = {
    label?: string;
    hasError?: boolean;
    light?: boolean;
    onChangeString?: (s: string) => void;
    horizontal?: boolean;
    description?: string;
    pill?: boolean;
    blue?: boolean;
    blueText?: boolean;
    mobileFriendly?: boolean;
    labelClassName?: string;
    inputClassName?: string;
} & React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
declare const _default$1: React$1.ForwardRefExoticComponent<Omit<Props$n, "ref"> & React$1.RefAttributes<HTMLInputElement>>;

interface OptionTypeBase<T> {
    label: string;
    value: T;
}
interface Option<T> extends OptionTypeBase<T> {
    isDisabled?: boolean;
    details?: ReactNode;
    icon?: ReactNode;
    iconPath?: string;
}
interface CustomGroupBase<OptionType> extends GroupBase<OptionType> {
    footer?: ReactNode;
    noOptionsMsg?: string;
}
type OnChange<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean> = (value: OnChangeValue<OptionType, IsMulti>, action: ActionMeta<OptionType>) => void;
type PartialStylesConfig<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean> = Partial<StylesConfig<OptionType, IsMulti, GroupBase<OptionType>>>;
type CustomStyles<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean> = (s: PartialStylesConfig<T, OptionType, IsMulti>) => PartialStylesConfig<T, OptionType, IsMulti>;
type WrapperProps = {
    label?: string;
    outerClassName?: string;
    labelClassName?: string;
    horizontal?: boolean;
    small?: boolean;
    ["data-cy"]?: string;
};
type CommonProps$1<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean> = {
    mono?: boolean;
    light?: boolean;
    small?: boolean;
    pill?: boolean;
    blue?: boolean;
    transparentBorder?: boolean;
    rounded?: boolean;
    forMobile?: boolean;
    customStyles?: CustomStyles<T, OptionType, IsMulti>;
    selectedOptionFirst?: boolean;
    noOptionsMsg?: string;
} & WrapperProps;
type CustomSelectProps<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean> = CommonProps$1<T, OptionType, IsMulti> & {
    val: Maybe<T>;
    options: OptionType[];
    getValFunc?: (o: T, v: T) => boolean;
    onChangeValue: (val: Maybe<T>) => void;
};
type Props$m<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean = false> = Omit<Props$B<OptionType, IsMulti>, "styles"> & CustomSelectProps<T, OptionType, IsMulti>;
type AsyncProps<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean = false> = AsyncProps$1<OptionType, IsMulti, GroupBase<OptionType>> & Omit<CommonProps$1<T, OptionType, IsMulti>, "selectedOptionFirst">;
type GroupedProps<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean = false> = Props$B<OptionType, IsMulti, CustomGroupBase<OptionType>> & CommonProps$1<T, OptionType, IsMulti>;

type types_d_AsyncProps<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean = false> = AsyncProps<T, OptionType, IsMulti>;
type types_d_CustomGroupBase<OptionType> = CustomGroupBase<OptionType>;
type types_d_CustomStyles<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean> = CustomStyles<T, OptionType, IsMulti>;
type types_d_GroupedProps<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean = false> = GroupedProps<T, OptionType, IsMulti>;
type types_d_OnChange<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean> = OnChange<T, OptionType, IsMulti>;
type types_d_Option<T> = Option<T>;
type types_d_OptionTypeBase<T> = OptionTypeBase<T>;
type types_d_PartialStylesConfig<T, OptionType extends OptionTypeBase<T>, IsMulti extends boolean> = PartialStylesConfig<T, OptionType, IsMulti>;
type types_d_WrapperProps = WrapperProps;
declare namespace types_d {
  export type { types_d_AsyncProps as AsyncProps, types_d_CustomGroupBase as CustomGroupBase, types_d_CustomStyles as CustomStyles, types_d_GroupedProps as GroupedProps, types_d_OnChange as OnChange, types_d_Option as Option, types_d_OptionTypeBase as OptionTypeBase, types_d_PartialStylesConfig as PartialStylesConfig, Props$m as Props, types_d_WrapperProps as WrapperProps };
}

declare function FormSelectAsync<T, OptionType extends OptionTypeBase<T> = Option<T>, IsMulti extends boolean = false>({ mono, light, small, pill, transparentBorder, blue, rounded, forMobile, ...props }: AsyncProps<T, OptionType, IsMulti>): JSX.Element;

declare function FormSelectGrouped<T, OptionType extends OptionTypeBase<T> = Option<T>, IsMulti extends boolean = false>({ mono, light, small, pill, transparentBorder, blue, rounded, forMobile, selectedOptionFirst, ...props }: GroupedProps<T, OptionType, IsMulti>): JSX.Element;

declare function FormSelect<T>({ mono, light, small, selectedOptionFirst, pill, transparentBorder, blue, rounded, forMobile, ...props }: Props$m<T, Option<T>>): JSX.Element;
declare namespace FormSelect {
    var Async: typeof FormSelectAsync;
    var Grouped: typeof FormSelectGrouped;
}

type Props$l = {
    popupProps?: Partial<PopupProps>;
    className?: string;
    children: ReactNode;
    icon?: ReactNode;
    blue?: boolean;
};
declare function HelpPopup(props: Props$l): React$1.JSX.Element;

interface LoaderOptions {
    lines?: number;
    length?: number;
    width?: number;
    radius?: number;
    scale?: number;
    corners?: number;
    color?: string;
    opacity?: number;
    rotate?: number;
    direction?: number;
    speed?: number;
    trail?: number;
    fps?: number;
    zIndex?: number;
    top?: string;
    left?: string;
    shadow?: boolean;
    hwaccel?: boolean;
    position?: string;
    loadedClassName?: string;
}
interface LoaderProps extends LoaderOptions {
    loaded: boolean;
    options?: LoaderOptions;
    className?: string;
    children?: ReactNode;
}
declare function Loader(props: LoaderProps): React$1.JSX.Element;

type Props$k = {
    className?: string;
    value: string;
    ["data-cy"]?: string;
    hasMaxHeight?: boolean;
    baseTextSize?: boolean;
    spaceAbove?: boolean;
};
declare function Markdown({ hasMaxHeight, baseTextSize, spaceAbove, ...props }: Props$k): React$1.JSX.Element;

type Props$j = {
    onRequestClose: () => void;
    backToPage: string;
    formTitle?: string;
    nav: ReactNode;
    children: ReactNode;
};
declare function MobileFormModal(props: Props$j): React$1.JSX.Element;

type ButtonProps = {
    onRequestClose: () => void | Promise<void>;
    children?: ReactNode;
    err?: Error;
    pill?: boolean;
};
type OuterProps = {
    onRequestClose: () => void | Promise<void>;
    children: ReactNode;
    title: string;
    className?: string;
    overlayClassName?: string;
    isOpen: boolean;
};
type Props$i = OuterProps & {
    button?: ReactNode;
    buttonPill?: boolean;
    err?: Error;
};
declare function ModalOuter(props: OuterProps): React$1.JSX.Element | null;
declare function ModalInner(props: {
    children: ReactNode;
    className?: string;
}): React$1.JSX.Element;
declare function ModalButtons(props: ButtonProps): React$1.JSX.Element;
declare function Modal({ children, ...props }: Props$i): React$1.JSX.Element | null;

type Props$h = OuterProps & {
    onSubmit: (e: SyntheticEvent) => void | Promise<void>;
    err?: Error;
    btnText: string;
    buttonDataCy?: string;
    pill?: boolean;
    red?: boolean;
    disabled?: boolean;
    gradient?: boolean;
};
declare function FormModal({ children, ...props }: Props$h): React$1.JSX.Element;

type Props$g = {
    leftLinks: ReactNode;
    rightLinks: ReactNode;
    logo: ReactNode;
    bgColor?: string;
    dark?: boolean;
    large?: boolean;
    logoLeft?: boolean;
    mobileBottomLinks?: ReactNode;
    rightLinksMobile?: ReactNode;
};
declare function Navbar(props: Props$g): React$1.JSX.Element;

type Props$f = {
    leftLinks: ReactNode;
    logo: ReactNode;
    rightLinks: ReactNode;
    bgColor?: string;
    large?: boolean;
    dark?: boolean;
    logoLeft?: boolean;
};
declare function DesktopNavbar(props: Props$f): React$1.JSX.Element;

type CommonProps = {
    logo: ReactNode;
    bgColor?: string;
};
type Props$e = CommonProps & {
    dark?: boolean;
    children: ReactNode;
    mobileBottomLinks?: ReactNode;
};
declare function ForMobile(props: Props$e): React$1.JSX.Element;

type Props$d = {
    ["data-cy"]?: string;
    className?: string;
    children: ReactNode;
};
declare function NoneFoundMsg(props: Props$d): React$1.JSX.Element;

type QueryResult<Q extends object> = {
    loading: boolean;
    error?: Error;
    data?: Q | undefined;
};
type HandlerProps<Q extends object> = {
    render: (data: Q) => ReactElement;
    result: QueryResult<Q>;
    noDataMsg?: string;
    errComponent?: ReactElement;
    loaderComponent?: ReactElement;
};
declare function QueryHandler<Q extends object>({ result: { data, error, loading }, noDataMsg, render, errComponent, loaderComponent, }: HandlerProps<Q>): ReactElement;

type Props$c = {
    name: string;
    checked: boolean;
    onChange: () => void;
    disabled?: boolean;
    className?: string;
    label?: string;
    description?: string;
};
declare function Radio({ className, description, label, ...props }: Props$c): React$1.JSX.Element;

type Props$b = {
    refToScroll: React$1.RefObject<HTMLDivElement | null>;
    isVisible: boolean;
    text: string;
};
declare function ScrollToButton(props: Props$b): React$1.JSX.Element | null;

declare const smallLoaderDefaultOptions: {
    lines: number;
    length: number;
    width: number;
    radius: number;
    scale: number;
    corners: number;
    color: string;
    opacity: number;
    rotate: number;
    direction: number;
    speed: number;
    trail: number;
    fps: number;
    zIndex: number;
    top: string;
    left: string;
    shadow: boolean;
    hwaccel: boolean;
    position: string;
};
type Props$a = {
    loaded: boolean;
    className?: string;
    options?: Partial<typeof smallLoaderDefaultOptions>;
    children?: ReactNode;
};
declare function SmallLoader(props: Props$a): React$1.JSX.Element;
declare namespace SmallLoader {
    var WithText: (props: WithTextProps) => React$1.JSX.Element;
}
type WithTextProps = {
    text: string;
    outerClassName?: string;
} & Props$a;

type Props$9 = {
    children: ReactNode;
    className?: string;
};
declare function SuccessMsg({ children, className }: Props$9): React$1.JSX.Element;

type Props$8 = {
    children: ReactNode;
    className?: string;
    index: number;
    name?: string;
    renderOnlyChild?: boolean;
    hide?: boolean;
    dark?: boolean;
    small?: boolean;
    disabled?: boolean;
};
declare function Tab(props: Props$8): React$1.JSX.Element | null;

type Props$7 = {
    children: ReactNode[];
    className?: string;
};
declare function TabList(props: Props$7): React$1.JSX.Element;

type Props$6 = {
    children: ReactNode;
    className?: string;
    index: number;
};
declare function TabPanel(props: Props$6): React$1.JSX.Element | null;

type Props$5 = {
    children: ReactNode;
    initialActiveIndex?: number;
    className?: string;
    afterSetTabIndex?: (i: number) => void;
};
declare function Tabs({ children, className, ...props }: Props$5): React$1.JSX.Element;

type TabsContextType = {
    activeTabIndex: number;
    setActiveTabIndex: (i: number) => void;
};
declare function useTabsContext(): TabsContextType;

type Props$4 = {
    label?: string;
    description?: string;
    onChangeString?: (value: string) => void;
    hasError?: boolean;
    light?: boolean;
    inputref?: React$1.RefObject<HTMLTextAreaElement | null>;
    horizontal?: boolean;
    mobileFriendly?: boolean;
    noMaxWidth?: boolean;
} & React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
declare const _default: React$1.ForwardRefExoticComponent<Omit<Props$4, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;

type Props$3 = {
    value: string;
    label?: string;
    rows: number;
    placeholder?: string;
    onChange: (c: string) => void;
    onFocus?: () => void;
    onBlur?: () => void;
    maxLength?: number;
    inputref?: React$1.RefObject<HTMLTextAreaElement | null>;
    onKeyDown?: (e: React$1.KeyboardEvent<HTMLTextAreaElement>) => Promise<void>;
    ["aria-label"]?: string;
    className?: string;
    name?: string;
    hasMaxHeight?: boolean;
    hasMinHeight?: boolean;
    separateTabs?: boolean;
    unroundBottom?: boolean;
    unroundTop?: boolean;
};
declare function TextareaWithMarkdown({ onChange, className, hasMaxHeight, unroundBottom, unroundTop, separateTabs, hasMinHeight, label, ...props }: Props$3): React$1.JSX.Element;

declare function Tooltip(props: ITooltip): React$1.JSX.Element;

type Props$2 = {
    href: string;
    dark?: boolean;
    className?: string;
};
declare function ForDiscord(props: Props$2): React$1.JSX.Element;

type Props$1 = {
    githubStarCount: number;
    href: string;
    dark?: boolean;
    className?: string;
    numeralFormat?: string;
};
declare function ForGithub(props: Props$1): React$1.JSX.Element;

interface IThemeRGB {
    "rgb-primary"?: string;
    "rgb-acc-1"?: string;
    "rgb-background-acc-1"?: string;
    "rgb-background-acc-start"?: string;
    "rgb-button-1"?: string;
    "rgb-link-1"?: string;
    "rgb-button-2"?: string;
    "rgb-link-2"?: string;
    "rgb-link-light"?: string;
    "rgb-code-background"?: string;
}
interface IThemeColors {
    primary?: string;
    "acc-1"?: string;
    "background-acc-1"?: string;
    "background-acc-start"?: string;
    "button-1"?: string;
    "link-1"?: string;
    "button-2"?: string;
    "link-2"?: string;
    "link-light"?: string;
    "background-light"?: string;
    "code-background"?: string;
}

type Props = {
    children: React$1.ReactNode;
    themeRGBOverrides?: IThemeRGB;
    updateRGBOnChange?: boolean;
};
type ThemeContextType = {
    themeRGB: IThemeRGB;
    convertThemeRGBToHex: () => IThemeColors;
};
declare function ThemeProvider(props: Props): React$1.JSX.Element;
declare function useThemeContext(): ThemeContextType;

/**
 * Merge @dolthub/react-components and Tailwind CSS configurations
 */
declare function mergeConfig(tailwindConfig: Config): Config;

declare const tailwindColorTheme$1: IThemeRGB;

declare const tailwindColorTheme: IThemeRGB;

export { Btn, Button, ButtonWithPopup, ButtonsWithError, CellDropdown, CharCount, Checkbox, CodeBlock, CommentForm, CopyButton, CopyableField, DesktopNavbar, ForDiscord as DiscordButton, ErrorMsg, ErrorMsgProvider, ExternalLink, FieldWithButton, Footer, _default$1 as FormInput, FormModal, FormSelect, types_d as FormSelectTypes, ForGithub as GithubButton, HelpPopup, Loader, Markdown, MobileFormModal, ForMobile as MobileNavbar, Modal, ModalButtons, ModalInner, ModalOuter, Navbar, NoneFoundMsg, Popup, QueryHandler, Radio, ScrollToButton, SmallLoader, SuccessMsg, Tab, TabList, TabPanel, Tabs, _default as Textarea, TextareaWithMarkdown, ThemeProvider, Tooltip, tailwindColorTheme$1 as hostedTailwindColorTheme, isTimeoutError, mergeConfig, useTabsContext, useThemeContext, tailwindColorTheme as workbenchTailwindColorTheme };
export type { IThemeColors, IThemeRGB };