@shlinkio/shlink-frontend-kit 0.7.2 → 0.8.0

package/dist/tailwind.d.ts

@@ -0,0 +1,224 @@
+import { FC } from 'react';
+import { HTMLProps } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { LinkProps } from 'react-router';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+
+export declare type BaseInputProps = {
+    size?: Size;
+    feedback?: 'error';
+};
+
+export declare const Button: FC<ButtonProps>;
+
+export declare type ButtonProps = PropsWithChildren<{
+    disabled?: boolean;
+    className?: string;
+    variant?: 'primary' | 'secondary' | 'danger';
+    size?: Size;
+    inline?: boolean;
+    solid?: boolean;
+} & (RegularButtonProps | LinkButtonProps_2)>;
+
+export declare type Callback = () => unknown;
+
+export declare const Card: FC<CardProps> & {
+    Body: FC<CardProps>;
+    Header: FC<CardProps>;
+    Footer: FC<CardProps>;
+};
+
+export declare type CardProps = HTMLProps<HTMLDivElement>;
+
+export declare type CellProps = HTMLProps<HTMLTableCellElement> & {
+    /**
+     * The name of the column to be displayed in small resolutions when the table is responsive, where the cells collapse.
+     * It is ignored for non-responsive tables.
+     */
+    columnName?: string;
+    /**
+     * Whether to use a th or td tag. If not provided, it is inferred based on the section, using td when inside tbody,
+     * and th when inside thead or tfoot
+     */
+    type?: 'td' | 'th';
+};
+
+export declare const CloseButton: FC<CloseButtonProps>;
+
+export declare type CloseButtonProps = {
+    label?: string;
+    onClick?: HTMLProps<HTMLButtonElement>['onClick'];
+};
+
+declare type CommonModalDialogProps = {
+    open: boolean;
+    size?: Size | 'xl' | 'full';
+    /** Modal header title */
+    title: string;
+    /** Invoked when the modal is closed for any reason */
+    onClose?: () => void;
+};
+
+declare type CoverModalDialogProps = CommonModalDialogProps & {
+    /**
+     * Cover dialogs have a body that span the whole dialog, and no buttons.
+     * The header overlaps the body with semi-transparent background.
+     */
+    variant: 'cover';
+};
+
+export declare const ELLIPSIS = "...";
+
+declare type Ellipsis = typeof ELLIPSIS;
+
+export declare const formatNumber: (number: number | string) => string;
+
+export declare const Input: FC<InputProps>;
+
+export declare type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & BaseInputProps & {
+    borderless?: boolean;
+};
+
+export declare const keyForPage: (pageNumber: NumberOrEllipsis, index: number) => string;
+
+export declare const Label: FC<LabelProps>;
+
+export declare const LabelledInput: FC<LabelledInputProps>;
+
+export declare type LabelledInputProps = Omit<InputProps, 'className' | 'id' | 'feedback'> & {
+    label: string;
+    inputClassName?: string;
+    error?: string;
+    /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
+    hiddenRequired?: boolean;
+};
+
+export declare const LabelledSelect: FC<LabelledSelectProps>;
+
+export declare type LabelledSelectProps = Omit<SelectProps, 'className' | 'id'> & {
+    label: string;
+    selectClassName?: string;
+    /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
+    hiddenRequired?: boolean;
+};
+
+export declare type LabelProps = HTMLProps<HTMLLabelElement> & {
+    required?: boolean;
+};
+
+export declare const LinkButton: FC<LinkButtonProps>;
+
+export declare type LinkButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'> & {
+    size?: Size;
+    type?: HTMLButtonElement['type'];
+};
+
+declare type LinkButtonProps_2 = LinkProps;
+
+export declare const ModalDialog: FC<ModalDialogProps>;
+
+export declare type ModalDialogProps = Omit<HTMLProps<HTMLDialogElement>, 'title' | 'size'> & (CoverModalDialogProps | RegularModalDialogProps);
+
+declare type NoTitleProps = {
+    title?: never;
+    titleSize?: never;
+};
+
+export declare type NumberOrEllipsis = number | Ellipsis;
+
+export declare const pageIsEllipsis: (pageNumber: NumberOrEllipsis) => pageNumber is Ellipsis;
+
+export declare const Paginator: FC<PaginatorProps>;
+
+export declare type PaginatorProps = {
+    pagesCount: number;
+    currentPage: number;
+} & ({
+    onPageChange: (currentPage: number) => void;
+} | {
+    urlForPage: (pageNumber: number) => string;
+});
+
+export declare const prettifyPageNumber: (pageNumber: NumberOrEllipsis) => string;
+
+export declare const progressivePagination: (currentPage: number, pageCount: number) => NumberOrEllipsis[];
+
+declare type RegularButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size'>;
+
+declare type RegularModalDialogProps = CommonModalDialogProps & {
+    /** Danger dialogs use danger variants in title and confirm button */
+    variant?: 'default' | 'danger';
+    /** Value to display in confirm button. Defaults to 'Confirm' */
+    confirmText?: string;
+    /** Invoked when the modal is closed via confirm button */
+    onConfirm?: () => void;
+};
+
+export declare const roundTen: (number: number) => number;
+
+export declare const SearchInput: FC<SearchInputProps>;
+
+export declare type SearchInputProps = Omit<InputProps, 'className' | 'onChange' | 'value'> & {
+    onChange: (searchTerm: string) => void;
+    containerClassName?: string;
+    inputClassName?: string;
+};
+
+export declare type SectionType = 'head' | 'body' | 'footer';
+
+export declare const Select: FC<SelectProps>;
+
+declare type SelectElementProps = Omit<HTMLProps<HTMLSelectElement>, 'size'>;
+
+export declare type SelectProps = PropsWithChildren<SelectElementProps & BaseInputProps>;
+
+export declare const SimpleCard: FC<SimpleCardProps>;
+
+export declare type SimpleCardProps = Omit<CardProps, 'title' | 'size'> & {
+    bodyClassName?: string;
+} & (TitleProps | NoTitleProps);
+
+declare type Size = 'sm' | 'md' | 'lg';
+
+export declare const Table: FC<TableProps> & {
+    Row: FC<HTMLProps<HTMLTableRowElement>>;
+    Cell: FC<CellProps>;
+};
+
+export declare type TableElementProps = PropsWithChildren & {
+    className?: string;
+};
+
+export declare type TableProps = HTMLProps<HTMLTableElement> & {
+    header: ReactNode;
+    footer?: ReactNode;
+    /**
+     * By default, the table rows will collapse under large resolutions, and the headers will be hidden.
+     * Set `responsive={false}` to avoid this behavior.
+     */
+    responsive?: boolean;
+};
+
+declare type TitleProps = {
+    title: ReactNode;
+    titleSize?: Size;
+};
+
+export declare function useTimeout(defaultDelay: number, 
+/** Test seam. Defaults to global setTimeout */
+setTimeout_?: typeof globalThis.setTimeout, 
+/** Test seam. Defaults to global clearTimeout */
+clearTimeout_?: typeof clearTimeout): UseTimeoutResult;
+
+export declare type UseTimeoutResult = {
+    /**
+     * Clears any in-progress timeout, and schedules a new callback.
+     * It optionally allows a delay to be provided, or falls back to the default delay otherwise.
+     */
+    setTimeout: (callback: Callback, delay?: number) => void;
+    /** Clears any in-progress timeout */
+    clearCurrentTimeout: () => void;
+};
+
+export { }