@gear-js/ui/dist/index.d.ts

React UI components used across Gear applications

import * as react_jsx_runtime from 'react/jsx-runtime';
import { FunctionComponent, SVGProps, ReactNode, ComponentPropsWithRef, InputHTMLAttributes, OptionHTMLAttributes, ReactPortal, CSSProperties } from 'react';
export { default as buttonStyles } from './components/Button/Button.module.scss';
export { default as checkboxStyles } from './components/Checkbox/Checkbox.module.scss';
export { default as inputStyles } from './components/Input/Input.module.scss';
export { default as radioStyles } from './components/Radio/Radio.module.scss';
export { default as selectStyles } from './components/Select/Select.module.scss';
export { default as textareaStyles } from './components/Textarea/Textarea.module.scss';
export { default as modalStyles } from './components/Modal/Modal.module.scss';
export { default as fileInputStyles } from './components/FileInput/FileInput.module.scss';
export { default as alertStyles } from './components/Alert/Alert.module.scss';
export { default as TooltipStyles } from './components/Tooltip/Tooltip.module.scss';
export { default as inputWrapperStyles } from './components/utils/InputWrapper/InputWrapper.module.scss';
export { default as TooltipWrapperStyles } from './components/utils/TooltipWrapper/TooltipWrapper.module.scss';

type Gap = `${number}/${number}`;
type BaseInputProps = {
    size?: 'normal' | 'large';
    color?: 'light' | 'dark';
    error?: ReactNode;
    tooltip?: string;
    block?: boolean;
};
type XDirectionProps = BaseInputProps & {
    label?: string;
    direction?: 'x';
    gap?: Gap;
};
type YDirectionProps = BaseInputProps & {
    label?: string;
    direction?: 'y';
    gap?: never;
};
type InputProps = XDirectionProps | YDirectionProps;
type SVGComponent = FunctionComponent<SVGProps<SVGSVGElement> & {
    title?: string | undefined;
}>;

type BaseProps = ComponentPropsWithRef<'button'> & {
    text?: string;
    icon?: SVGComponent;
    color?: 'primary' | 'secondary' | 'light' | 'lightGreen' | 'gradient' | 'grey' | 'transparent';
    size?: 'large' | 'medium' | 'small';
    block?: boolean;
    noWrap?: boolean;
    tooltip?: string;
    noLetterSpacing?: boolean;
};
type TextProps = BaseProps & {
    text: string;
};
type IconProps = BaseProps & {
    icon: SVGComponent;
};
type Props$c = TextProps | IconProps;

declare const Button: (props: Props$c) => react_jsx_runtime.JSX.Element;

type Props$b = ComponentPropsWithRef<'input'> & {
    label: string;
    type?: 'switch';
};
declare const Checkbox: ({ label, className, type, ...attrs }: Props$b) => react_jsx_runtime.JSX.Element;

type Props$a = Omit<ComponentPropsWithRef<'input'>, 'size'> & InputProps & {
    icon?: SVGComponent;
};
declare const Input: (props: Props$a) => react_jsx_runtime.JSX.Element;

type Props$9 = ComponentPropsWithRef<'input'> & {
    label: string;
};
declare const Radio: ({ label, className, ...attrs }: Props$9) => react_jsx_runtime.JSX.Element;

interface Props$8 extends InputHTMLAttributes<HTMLInputElement> {
    buttons: Props$9[];
}
declare const RadioGroup: ({ buttons, value, ...attrs }: Props$8) => react_jsx_runtime.JSX.Element;

type Props$7 = Omit<ComponentPropsWithRef<'select'>, 'size'> & InputProps & ({
    options: OptionHTMLAttributes<HTMLOptionElement>[] | Readonly<OptionHTMLAttributes<HTMLOptionElement>[]>;
} | {
    children: ReactNode;
});
declare const Select: (props: Props$7) => react_jsx_runtime.JSX.Element;

type Props$6 = ComponentPropsWithRef<'textarea'> & InputProps;
declare const Textarea: (props: Props$6) => react_jsx_runtime.JSX.Element;

type Props$5 = {
    heading: string;
    close: () => void;
    children?: ReactNode;
    footer?: ReactNode;
    className?: string;
    size?: 'normal' | 'large';
};
declare const Modal: ({ heading, close, children, footer, className, size }: Props$5) => ReactPortal | null;

type Props$4 = Omit<ComponentPropsWithRef<'input'>, 'size' | 'value' | 'onChange' | 'accept'> & Omit<InputProps, 'color'> & {
    value?: File | undefined;
    label?: string;
    error?: string;
    color?: Props$c['color'];
    accept?: string | string[];
    onChange?: (value: File | undefined) => void;
};
declare const FileInput: (props: Props$4) => react_jsx_runtime.JSX.Element;

type Options = {
    type: 'info' | 'error' | 'loading' | 'success';
    style?: CSSProperties;
    title?: string;
    timeout?: number;
    isClosed?: boolean;
};
type Alert$1 = {
    id: string;
    content: ReactNode;
    options: Options;
};
type Props$3 = {
    alert: Alert$1;
    close: () => void;
};

declare function Alert({ alert, close }: Props$3): react_jsx_runtime.JSX.Element;

type Props$2 = {
    text: string;
    className?: string;
};
declare function Tooltip({ text, className }: Props$2): react_jsx_runtime.JSX.Element;

type Props$1 = {
    id: string;
    direction: string;
    size: string;
    children: ReactNode;
    className?: string;
    label?: string;
    error?: ReactNode;
    gap?: Gap;
    disabled?: boolean;
    tooltip?: string;
};
declare const InputWrapper: (props: Props$1) => react_jsx_runtime.JSX.Element;

type Props = {
    text: string;
    children: ReactNode;
    className?: string;
};
declare const TooltipWrapper: ({ text, children, className }: Props) => react_jsx_runtime.JSX.Element;

export { Alert, type Props$3 as AlertProps, Button, type Props$c as ButtonProps, Checkbox, type Props$b as CheckboxProps, FileInput, type Props$4 as FileInputProps, Input, type Props$a as InputProps, InputWrapper, type Props$1 as InputWrapperProps, Modal, type Props$5 as ModalProps, Radio, RadioGroup, type Props$8 as RadioGroupProps, type Props$9 as RadioProps, Select, type Props$7 as SelectProps, Textarea, type Props$6 as TextareaProps, Tooltip, type Props$2 as TooltipProps, TooltipWrapper, type Props as TooltipWrapperProps };