@mackin.com/styleguide 4.2.0

package/index.d.ts

@@ -0,0 +1,938 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+import * as React from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+declare type Alignment = 'left' | 'right' | 'center';
+
+declare const mergeClassNames: (...classes: (string | boolean | undefined)[]) => string | undefined;
+declare const getCurrencyDisplay: (value: number, isCents?: boolean | undefined, denomination?: string) => string;
+
+/** @jsx jsx */
+
+declare const Table: (props: {
+    caption?: string | JSX.Element;
+    children?: any;
+    noCellBorder?: boolean;
+    className?: string;
+    /** Colors alternate rows. */
+    altRows?: boolean;
+}) => jsx.JSX.Element;
+declare const Tr: (props: {
+    className?: string;
+    children?: any;
+}) => jsx.JSX.Element;
+declare const Th: (props: {
+    children?: any;
+    align?: Alignment;
+    width?: string;
+    style?: React.CSSProperties;
+    className?: string;
+}) => jsx.JSX.Element;
+declare const Td: (props: {
+    children?: any;
+    align?: Alignment;
+    style?: React.CSSProperties;
+    colSpan?: number;
+}) => jsx.JSX.Element;
+
+declare const TdCurrency: (props: {
+    value: number;
+    cents?: boolean;
+}) => JSX.Element;
+
+declare const TdNumber: (props: {
+    value: number;
+}) => JSX.Element;
+
+/** @jsx jsx */
+
+declare const ThSort: (props: {
+    text: string | JSX.Element;
+    onClick: () => void;
+    align?: Alignment;
+    direction?: 'asc' | 'desc';
+    style?: React.CSSProperties;
+    width?: string;
+    rightContent?: JSX.Element;
+}) => jsx.JSX.Element;
+
+declare type SortDirection = 'asc' | 'desc';
+interface PagerSortOption<TItem> {
+    id: string;
+    name?: string;
+    sort: (items: TItem[]) => TItem[];
+}
+interface PagerOptions<TItem> {
+    /** Defaults to 10. */
+    limit?: number;
+    /** Defaults to [10] */
+    limitOptions?: number[];
+    sort?: string;
+    sortOptions?: PagerSortOption<TItem>[];
+    previous?: ItemPager<TItem>;
+}
+/** For in-memory paging. */
+declare class ItemPager<TItem> {
+    constructor(allItems: TItem[], options?: PagerOptions<TItem>);
+    get allItems(): TItem[];
+    /** The ID of the current sort within the sortOptions. */
+    get sort(): string | undefined;
+    set sort(sortId: string | undefined);
+    /** The direction of the current sort when using an option created from addToggleSortOption */
+    get sortDirection(): SortDirection | undefined;
+    get sortOptions(): PagerSortOption<TItem>[];
+    get limit(): number;
+    set limit(value: number);
+    get limitOptions(): number[];
+    get totalPages(): number;
+    /** The zero-based page index. */
+    get page(): number;
+    /** The zero-based page index. */
+    set page(value: number);
+    get pageItems(): TItem[];
+    get totalItems(): number;
+    get minItemIndex(): number;
+    get maxItemIndex(): number;
+    get hasNext(): boolean;
+    get hasPrevious(): boolean;
+    /**
+     * Adds both asc and des sort options
+     *
+     * @param propPath Prop name or path ('resource.title').
+     * @param name Name to display or asc Name and desc Name.
+     */
+    addToggleSortOption(propPath: string, name?: string | [string, string]): void;
+    /**
+     * Toggles between asc and desc.
+     * @param sortId The ID or partial ID (no '-asc' or '-desc') of a sort option created through addToggleSortOption
+     */
+    toggleSort(sortId: string): void;
+    applyFilter(filter?: (item: TItem) => boolean, keepPage?: boolean): void;
+    next(): void;
+    previous(): void;
+    pageByOffset(direction: 1 | -1): void;
+    /** Adds the item optionally keeping the current page. */
+    add(item: TItem, position?: 'start' | 'end', keepPage?: boolean): void;
+    /** Removes the matched item(s). */
+    remove(comparer: (item: TItem) => boolean, keepPage?: boolean): void;
+    replace(newItem: TItem, comparer: (item: TItem) => boolean): void;
+    private _allItems;
+    private _page;
+    private _limit;
+    private _limitOptions;
+    private _pageResult;
+    private _filteredItems;
+    private _sort;
+    private _sortOptions;
+    private _currentFilter;
+    private createPageResult;
+}
+
+/** @jsx jsx */
+
+interface PagerStyleProps {
+    /** Used for localizations.  Defaults to 'of' */
+    itemDividerText?: string;
+    /** Used for localizations.  Defaults to 'No Results' */
+    noResultsText?: string;
+    /** Used for localizations.  Defaults to 'Page' */
+    pageText?: string;
+    rounded?: boolean;
+    className?: string;
+    leftControls?: JSX.Element;
+    rightControls?: JSX.Element;
+}
+interface PagerProps extends PagerStyleProps {
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    minItem: number;
+    maxItem: number;
+    totalItems: number;
+    page: (direction: 1 | -1) => void;
+    /** For display purposes. Will show under items text if this if present. */
+    pageIndex?: number;
+    /** For display purposes. Will show under items text if this if present. */
+    totalPages?: number;
+}
+declare const Pager: (props: PagerProps) => jsx.JSX.Element;
+
+interface Props$2<T> extends PagerStyleProps {
+    pager: ItemPager<T>;
+    onPage: (direction: 1 | -1) => void;
+    /** Defaults to 'Limit' */
+    limitText?: string;
+    /** Defaults to 'Sort' */
+    sortText?: string;
+    onLimit?: (limit: number) => void;
+    onSort?: (sort: string) => void;
+    /** Shows 'Page X of Y'. */
+    showPageText?: boolean;
+}
+declare const BoundMemoryPager: <T>(p: Props$2<T>) => JSX.Element;
+
+/** @jsx jsx */
+
+declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
+interface ButtonProps {
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    type?: 'button' | 'submit';
+    children?: any;
+    style?: React.CSSProperties;
+    variant?: ButtonVariant;
+    /** Defaults to 'center'. */
+    textAlign?: 'left' | 'center' | 'right';
+    block?: boolean;
+    /** As round as can be. */
+    round?: boolean;
+    /** Just taking the edge off. */
+    rounded?: boolean;
+    className?: string;
+    rightIcon?: JSX.Element;
+    leftIcon?: JSX.Element;
+    /** full width with max space between the text and the icon */
+    iconBlock?: boolean;
+    small?: boolean;
+    disabled?: boolean;
+    /** The button will not respond to click or mouse events, but it will appear normal. */
+    readonly?: boolean;
+    waiting?: boolean;
+    /** The minimum button size will be set to the themes' formButtonMinWidth. */
+    enforceMinWidth?: boolean;
+    title?: string;
+    tabIndex?: number;
+    id?: string;
+}
+declare const Button: (props: ButtonProps) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+interface CheckboxProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    children?: React.ReactNode;
+    className?: string;
+    checkedIcon?: string;
+    uncheckedIcon?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+}
+declare const Checkbox: (props: CheckboxProps) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+interface ConfirmModalProps {
+    show: boolean;
+    text: string;
+    header: string;
+    onCancel: () => void;
+    onConfirm: () => void;
+    confirmText?: string;
+    cancelText?: string;
+    className?: string;
+    variant?: 'omg';
+}
+declare const ConfirmModal: (props: ConfirmModalProps) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+declare const Divider: (props: {}) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+declare const ErrorModal: (props: {
+    message: string;
+    show: boolean;
+    close: () => void;
+}) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+interface FilePickerProps {
+    maxBytes?: number;
+    multiple?: boolean;
+    accept?: string;
+    /** Defaults to 'Choose File(s)'. */
+    buttonText?: string;
+    /** If the handler returns true, the native file input will be cleared.  */
+    onChange?: (files: FileList | undefined) => boolean | undefined;
+    /**
+     * Used the facilitate communication between the FilePicker and FileUploader.
+     * Temp solution until we merge both together.  Don't use! */
+    __passClearFilesHandle?: (func: () => void) => void;
+}
+/** Basic implementation here for later abstraction. */
+declare const FilePicker: (props: FilePickerProps) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+interface IProps extends React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {
+    inline?: boolean;
+}
+/** Use this instead of <form> directly.  If we need to fight Chrome's autofill, we can do so at a global level. */
+declare const Form: (props: IProps) => jsx.JSX.Element;
+declare const FormFlexRow: (props: {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start";
+}) => jsx.JSX.Element;
+declare const FormColumnRow: (props: {
+    children: React.ReactNode;
+    cols: number;
+    className?: string;
+    style?: React.CSSProperties;
+}) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+declare const Header: (props: {
+    title?: string | JSX.Element;
+    toggleMenu?: () => void | undefined;
+    /** If true, will hide menu button on larger screens */
+    responsive?: boolean;
+    rightElements?: JSX.Element;
+    inline?: boolean;
+    className?: string;
+    centerOffsetElements?: JSX.Element;
+    noMenu?: boolean;
+    /** Will fill the title center aligned with wrapping. */
+    fillTitle?: boolean;
+}) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+declare const Highlight: (props: {
+    text: string;
+    highlightText: string;
+}) => jsx.JSX.Element;
+
+declare const ICONS: {
+    [key: string]: IconDefinition;
+};
+declare const Icon: (props: {
+    id: string;
+    className?: string | undefined;
+    spin?: boolean | undefined;
+    style?: React.CSSProperties | undefined;
+    onClick?: ((e: React.MouseEvent<SVGSVGElement | HTMLElement, MouseEvent>) => void) | undefined;
+}) => JSX.Element;
+
+/** @jsx jsx */
+
+declare const Image: (props: {
+    src: string;
+    alt: string;
+    className?: string;
+    style?: React.CSSProperties;
+}) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+declare const InfoPanel: (props: {
+    children: React.ReactNode;
+    variant?: 'info' | 'warning' | 'error' | 'negative' | 'positive';
+    className?: string;
+    style?: React.CSSProperties;
+}) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+interface InfoTipProps {
+    content?: string | JSX.Element;
+    disabled?: boolean;
+    onClick?: () => void;
+    tabIndex?: number;
+    loadOnHover?: () => Promise<void>;
+    onClose?: () => void;
+    /** Defaults to 'info'. */
+    variant?: 'info' | 'modal';
+    modalHeader?: string;
+    /** Defaults to nav color. */
+    bgColor?: string;
+    /** Defaults to nav font color. */
+    fontColor?: string;
+}
+declare const InfoTip: (props: InfoTipProps) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+declare type InputValue = string | number | undefined;
+declare type InputType = 'text' | 'number' | 'textarea' | 'date' | 'password';
+interface InputProps {
+    type: InputType;
+    style?: React.CSSProperties;
+    value?: InputValue;
+    rounded?: boolean;
+    placeholder?: string;
+    id?: string;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    /** Defaults to 250ms */
+    debounceMs?: number;
+    /** Called with debounce when the input changes. */
+    onChange?: (value: InputValue) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Defaults to 100. Ignored for type=number and type=date. */
+    maxLength?: number;
+    /** Ignored for type=textarea. */
+    rightControl?: JSX.Element;
+    /** Ignored for type=textarea. */
+    round?: boolean;
+    /** Only used for type=number and type=date. If type=date, this is the ms from Date.valueOf(). */
+    min?: number;
+    /** Only used for type=number. If type=date, this is the ms from Date.valueOf(). */
+    max?: number;
+    /** Only used for type=textarea. Defaults to 10. */
+    rows?: number;
+}
+declare const Input: (props: InputProps) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+interface LabelProps {
+    text: string | JSX.Element;
+    children: React.ReactNode;
+    static?: boolean;
+    htmlFor?: string;
+    /** Defaults to 'vertical'. */
+    orientation?: 'vertical' | 'horizontal' | 'horizontalReverse';
+    /** The alignment of the label text.  Defaults to 'left'.  Ignored for horizontal and horizontalReverse orientation. */
+    align?: 'left' | 'right' | 'center';
+    className?: string;
+    /** Don't wrap the children in the <label>. Fixes re-focus bugs with the date picker and possible future libraries. */
+    noWrap?: boolean;
+    /** Smaller text next to the main label. */
+    subText?: string | JSX.Element;
+    /** Indicates the control this label wraps is optional. Mutually exclusive with subText. */
+    optional?: boolean;
+    /** Used with static.  Will put label text in the same position it would be if there was an input around it.  For lining up forms. */
+    controlAlign?: boolean;
+}
+declare const Label: (props: LabelProps) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+declare const List: (props: {
+    children?: any;
+    altRowColor?: boolean;
+    noLines?: boolean;
+    className?: string;
+    items?: (string | JSX.Element)[];
+}) => jsx.JSX.Element;
+declare const ListItem: (props: {
+    children?: any;
+    id?: string | number;
+    /** For variant 'full', the content will take up the entire space of the parent (no padding applied by this component). */
+    variant?: 'full';
+    className?: string;
+}) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+interface ModalProps {
+    show: boolean;
+    children: React.ReactNode;
+    close?: () => void;
+    noBackground?: boolean;
+    closeButton?: boolean;
+    heading?: string;
+    className?: string;
+    scrollable?: boolean;
+    id?: string;
+    /** Defaults to theme.breakpoints.tablet. */
+    maxWidth?: string;
+    minWidth?: string;
+    /** Selector of the element to focus on initial show. */
+    focusSelector?: string;
+}
+declare const Modal: (props: ModalProps) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+declare const Nav: (props: {
+    show: boolean;
+    toggle: () => void;
+    children?: React.ReactNode;
+    responsive?: boolean;
+    className?: string;
+}) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+interface OmniLinkProps {
+    href: string;
+    children: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    className?: string;
+    noRouter?: boolean;
+    /** Ignored if 'noRouter' is false */
+    target?: string;
+    rightIcon?: JSX.Element;
+    leftIcon?: JSX.Element;
+    block?: boolean;
+    /** Full width with max space between the text and the icon */
+    iconBlock?: boolean;
+    /** Corresponds to the button variants of the same name. */
+    variant?: 'button' | 'label' | 'icon' | 'circle' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
+    title?: string;
+    /** Only for button variants. */
+    round?: boolean;
+    /** Only for button variants. */
+    rounded?: boolean;
+    /** Only for button variants. */
+    small?: boolean;
+    /** Overrides the default color (theme.colors.link) for non-button variants. To be used under exceptional circumstances. To change all link colors, override theme.colors.link directly. */
+    colorOverride?: string;
+}
+declare const OmniLink: (props: OmniLinkProps) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+declare type PickerValue = string | number;
+interface PickerProps<T extends PickerValue> {
+    type: 'select';
+    value: T;
+    options: (T | {
+        id: T;
+        name?: string;
+    })[];
+    onChange: (value: T) => void;
+    id?: string;
+    rounded?: boolean;
+    disabled?: boolean;
+    className?: string;
+    readonly?: boolean;
+}
+declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => jsx.JSX.Element | null;
+
+/** @jsx jsx */
+
+interface ProgressBarProps {
+    pct: number;
+    round?: boolean;
+    showPct?: boolean;
+    className?: string;
+}
+declare const ProgressBar: (props: {
+    pct: number;
+    round?: boolean;
+    showPct?: boolean;
+    className?: string;
+}) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+interface SearchBoxProps {
+    value: string | undefined;
+    onChange: (value: string | undefined | number) => void;
+    placeholder?: string;
+    round?: boolean;
+    rounded?: boolean;
+    className?: string;
+    onSubmit?: () => Promise<void>;
+}
+declare const SearchBox: (props: SearchBoxProps) => jsx.JSX.Element;
+
+interface TextProps {
+    children: any;
+    /** Defaults to 'p'. */
+    tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'span' | 'div';
+    align?: Alignment;
+    bold?: boolean;
+    italics?: boolean;
+    className?: string;
+    /** You will need to set a width or max-width on the element for this to work. */
+    ellipsis?: boolean;
+    style?: React.CSSProperties;
+    smaller?: boolean;
+    larger?: boolean;
+    spacedOut?: boolean;
+    lineClamp?: number;
+    /** Will remove all margin/padding from specified tag */
+    noPad?: boolean;
+    leftPad?: string;
+}
+declare const Text: (props: TextProps) => React.DetailedReactHTMLElement<{
+    style: React.CSSProperties;
+    className: string | undefined;
+}, HTMLElement>;
+
+declare type ToggleButtonVariant = 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
+interface ToggleButtonProps {
+    checked: boolean;
+    checkedText: string;
+    uncheckedText: string;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    className?: string;
+    checkedClassName?: string;
+    disabled?: boolean;
+    /** The minimum button size will be set to the themes' formButtonMinWidth. */
+    enforceMinWidth?: boolean;
+    checkedIcon?: JSX.Element;
+    uncheckedIcon?: JSX.Element;
+    variant?: ToggleButtonVariant;
+    checkedVariant?: ToggleButtonVariant;
+    style?: React.CSSProperties;
+    checkedStyle?: React.CSSProperties;
+}
+declare const ToggleButton: (props: ToggleButtonProps) => JSX.Element;
+
+/** @jsx jsx */
+
+interface ToggleButtonGroupProps {
+    value: string | number;
+    options: {
+        id: string | number;
+        name: string | JSX.Element;
+        rightIcon?: JSX.Element;
+        activeClass?: string;
+    }[];
+    onChange: (value: string | number) => void;
+    className?: string;
+    disabled?: boolean;
+    /** The minimum button size will be set to the themes' formButtonMinWidth. */
+    enforceMinWidth?: boolean;
+    round?: boolean;
+    small?: boolean;
+    width?: string;
+}
+declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+declare const WaitingIndicator: (props: {
+    show: boolean;
+}) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+interface CalendarProps {
+    month: number;
+    year: number;
+    /** Defaults to 3rem. */
+    cellSize?: string;
+    smallHeader?: boolean;
+    id?: string;
+    /** Defaults to true. */
+    title?: boolean;
+    yearInTitle?: boolean;
+    /** Ignored if title is set to false. */
+    customTitle?: JSX.Element;
+    /** If true, will always show 6 rows / 42 cells. */
+    fixedRows?: boolean;
+    /** Bolds the current date. */
+    showCurrent?: boolean;
+    selectedValue?: number;
+    /** Renders custom content for each cell.  The content will be wrapped in a button if onClick is provided. */
+    renderCell?: (date: Date) => JSX.Element;
+    /** Used with renderCell with onClick is provided.  Will not wrap the cell contents in a button. */
+    isCellDisabled?: (date: Date) => boolean;
+    onClick?: (date: Date) => void;
+    /** This is the ms from Date.valueOf(). */
+    min?: number;
+    /** This is the ms from Date.valueOf(). */
+    max?: number;
+}
+declare const Calendar: (p: CalendarProps) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+interface DatePickerProps {
+    value: number | undefined;
+    /** Called with debounce when the input changes. */
+    onChange: (value: number | undefined) => void;
+    style?: React.CSSProperties;
+    /** Defaults to MM/DD/YYYY. */
+    placeholder?: string;
+    id?: string;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    /** Defaults to 250ms */
+    debounceMs?: number;
+    rounded?: boolean;
+    round?: boolean;
+    /** This is the ms from Date.valueOf(). */
+    min?: number;
+    /** This is the ms from Date.valueOf(). */
+    max?: number;
+    /** Whether to move the popover on collision with the parent's bounds.  Default is true. */
+    reposition?: boolean;
+}
+declare const DatePicker: (p: DatePickerProps) => jsx.JSX.Element;
+
+/** @jsx jsx */
+
+interface TabHeaderTabProps {
+    name: string;
+}
+interface TabHeaderProps {
+    tabs: TabHeaderTabProps[];
+    id?: string;
+    rounded?: boolean;
+    /** Defaults to 10rem. */
+    maxTabWidth?: string;
+    onTabChanged?: (tabIndex: number) => void;
+    /** Defaults to 'tab'. */
+    variant?: 'tab' | 'button';
+}
+declare const TabHeader: (p: TabHeaderProps) => jsx.JSX.Element;
+
+interface Props$1 {
+}
+declare const GlobalStyles: (p: Props$1) => JSX.Element;
+
+interface MackinTheme {
+    colors: {
+        primary: string;
+        primaryFont: string;
+        primary2: string;
+        primary2Font: string;
+        secondary: string;
+        secondary2Font: string;
+        info: string;
+        infoFont: string;
+        warning: string;
+        warningFont: string;
+        positive: string;
+        positiveFont: string;
+        negative: string;
+        negativeFont: string;
+        omg: string;
+        omgFont: string;
+        bg: string;
+        lightBg: string;
+        font: string;
+        header: string;
+        headerFont: string;
+        link: string;
+        border: string;
+        divider: string;
+        nav: string;
+        navFont: string;
+        focusOutline: string;
+        focusOutlineRequired: string;
+        progressBg: string;
+        progressFill: string;
+        modalBg: string;
+        disabled: string;
+        textHighlight: string;
+        required: string;
+        backdrop: string;
+        pagerBg: string;
+        [key: string]: string;
+    };
+    fonts: {
+        family: string;
+        size: string;
+        headerFamily: string;
+    };
+    controls: {
+        padding: string;
+        fontSize: string;
+        borderWidth: string;
+        border: string;
+        height: string;
+        heightSmall: string;
+        boxShadow: string;
+        hoverBrightness: string;
+        transitionDuration: string;
+        transitionEasing: string;
+        transition: string;
+        focusOutlineShadow: string;
+        focusOutlineRequiredShadow: string;
+        roundRadius: string;
+        roundedRadius: string;
+        disabledOpacity: string;
+        formButtonMinWidth: string;
+        gap: string;
+        dividerMargin: string;
+        dividerBorder: string;
+        headerBoxShadow: string;
+    };
+    zIndexes: {
+        header: number;
+        backdrop: number;
+        nav: number;
+        flyout: number;
+        modal: number;
+        tooltip: number;
+    };
+    layout: {
+        headerHeight: string;
+        headerBodyOffset: string;
+        navWidth: string;
+    };
+    breakpoints: {
+        desktop: string;
+        tablet: string;
+    };
+}
+/** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
+declare const calcDynamicThemeProps: <T extends MackinTheme>(theme: T) => void;
+declare const defaultTheme: MackinTheme;
+
+/** Returns a user-provided theme if ThemeProvider was used correctly, or the default theme. */
+declare const useThemeSafely: () => MackinTheme;
+
+/** @jsx jsx */
+
+declare const Backdrop: (props: {
+    show: boolean;
+    onClick?: () => void;
+    transparent?: boolean;
+    /** If true, the backdrop will hide on larger screens. */
+    responsive?: boolean;
+    /** If true, the backdrop will hide on smaller screens. */
+    reverseResponsive?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    /** If true, will not prevent scroll when shown. */
+    allowScroll?: boolean;
+}) => jsx.JSX.Element;
+
+declare const TabLocker: (props: {
+    disabled?: boolean;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}) => JSX.Element;
+
+/** @jsx jsx */
+
+interface FileUploaderProps extends FilePickerProps {
+    onUpload: (files: FileList) => Promise<void>;
+    /** Defaults to 'Upload'. */
+    buttonText?: string;
+    /** Defauts to 'Upload successful'. */
+    successMessage?: string | JSX.Element;
+    /** Defaults to 'Upload failed.' */
+    failureMessage?: string | JSX.Element;
+    /** Defaults to 10rem. */
+    buttonWidth?: string;
+    /** Defaults to 'primary'. */
+    buttonVariant?: ButtonVariant;
+    /** Will clear all files on upload success. */
+    clearOnUpload?: boolean;
+}
+declare const FileUploader: (p: FileUploaderProps) => jsx.JSX.Element;
+
+interface CopyButtonProps {
+    /** HTML selector of the target input to copy from. */
+    selector: string;
+    title?: string;
+}
+declare const CopyButton: (props: CopyButtonProps) => JSX.Element;
+
+/** @jsx jsx */
+
+interface PopoverProps {
+    isOpen: boolean;
+    /** The content inside the popover. */
+    content: JSX.Element;
+    /** The element controlling the state of the popover. */
+    parent: JSX.Element;
+    id?: string;
+    /** Whether to move the popover on collision with the parent's bounds.  Default is true. */
+    reposition?: boolean;
+    onClickOutside?: (e: MouseEvent) => void;
+    /** Popover arrow color.  Defaults to theme.colors.border. */
+    arrorColor?: string;
+    /** Popover border.  Defaults to theme.controls.border. */
+    border?: string;
+    /** Popover background.  Defaults to  theme.colors.bg. */
+    backgroundColor?: string;
+}
+declare const Popover: (p: PopoverProps) => jsx.JSX.Element;
+
+interface TogglePasswordInputProps extends Omit<InputProps, 'type' | 'rightControl'> {
+}
+declare const TogglePasswordInput: (p: TogglePasswordInputProps) => JSX.Element;
+
+declare class PagedResult<T> {
+    constructor(items?: T[], total?: number, page?: number, limit?: number);
+    static fromDto<T>(dto: {
+        [key: string]: any;
+    }): PagedResult<T>;
+    total: number;
+    /** The zero-based page index. */
+    page: number;
+    limit: number;
+    items: T[];
+    /** Helper for items.length */
+    get length(): number;
+    get hasItems(): boolean;
+    get previousPage(): number;
+    get hasPrevious(): boolean;
+    get nextPage(): number;
+    get hasNext(): boolean;
+    get lastPage(): number;
+    get totalPages(): number;
+    get minPageItemIndex(): number;
+    get maxPageItemIndex(): number;
+    /** Returns the first item on the current page. */
+    get firstPageItem(): T;
+    /** Returns the last item on the current page */
+    get lastPageItem(): T;
+    getPageRelativeItemIndex(item: T): number;
+    getResultRelativeItemIndex(item: T): number | undefined;
+    getPreviousItem(fromItem: T): T | undefined;
+    getNextItem(fromItem: T): T | undefined;
+    getPagingRange(radius: number): number[];
+    toJSON(): {
+        [key: string]: any;
+    };
+    clone(newItems?: T[]): PagedResult<T>;
+}
+
+interface Props<T> extends PagerStyleProps {
+    result: PagedResult<T>;
+    onPage: (direction: 1 | -1) => void;
+    limitOptions?: number[];
+    sort?: string | number;
+    sortOptions?: {
+        id: string | number;
+        name?: string;
+    }[];
+    /** Defaults to 'Limit' */
+    limitText?: string;
+    /** Defaults to 'Sort' */
+    sortText?: string;
+    onLimit?: (limit: number) => void;
+    onSort?: (sort: string | number) => void;
+    /** Shows 'Page X of Y'. */
+    showPageText?: boolean;
+}
+declare const BoundStaticPager: <T>(p: Props<T>) => JSX.Element;
+
+/** @jsx jsx */
+
+declare type SliderValue = number | [number, number];
+interface SliderProps<T extends SliderValue> {
+    min: number;
+    max: number;
+    value: T;
+    id?: string;
+    /** Default is 1. */
+    step?: number;
+    /** Shows the current value above each handle. */
+    showValue?: boolean;
+    onChange: (value: T) => void;
+    onUpdate?: (value: T) => void;
+    /** Used with showValue.  Will be called to render the display string. */
+    renderValue?: (value: number) => string;
+}
+declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => jsx.JSX.Element;
+
+export { Alignment, Backdrop, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DatePicker, DatePickerProps, Divider, ErrorModal, FilePicker, FilePickerProps, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextProps, Th, ThSort, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useThemeSafely };