pdh-design-system/dist/index.d.ts

PDH Design System React Components

import React from 'react';
import * as react_bootstrap from 'react-bootstrap';
import { BadgeProps as BadgeProps$1, FormControlProps, SpinnerProps, TooltipProps as TooltipProps$1, FormSelectProps, BreadcrumbProps as BreadcrumbProps$1, ModalProps as ModalProps$1, TabsProps, FormCheckProps, ListGroupProps as ListGroupProps$1, OverlayTriggerProps, AccordionProps as AccordionProps$1, AccordionBodyProps, CardProps as CardProps$1, CarouselProps as CarouselProps$1, TableProps, OffcanvasProps } from 'react-bootstrap';
export { Alert, ButtonGroup, ButtonToolbar, Col, Container, Dropdown, DropdownButton, DropdownDivider, Form, FormControl, Image, InputGroup, Nav, NavDropdown, NavLink, OverlayTrigger, Popover, ProgressBar, Row, Spinner } from 'react-bootstrap';
import { ButtonProps as ButtonProps$1 } from 'react-bootstrap/Button';
import { ToastProps as ToastProps$1 } from 'react-bootstrap/Toast';
import { ToastPosition } from 'react-bootstrap/ToastContainer';
import * as react_bootstrap_esm_helpers from 'react-bootstrap/esm/helpers';
import { NavbarProps as NavbarProps$1 } from 'react-bootstrap/Navbar';
import { NavLinkProps } from 'react-bootstrap/NavLink';

declare namespace variants {
    let PRIMARY: string;
    let SECONDARY: string;
    let TERTIARY: string;
    let INFO: string;
    let SUCCESS: string;
    let DANGER: string;
    let WARNING: string;
    let PURPLE: string;
    let DARK: string;
    let LIGHT: string;
    let LINK: string;
}
declare namespace variantsOutline {
    let OUTLINE_PRIMARY: string;
    let OUTLINE_SECONDARY: string;
    let OUTLINE_TERTIARY: string;
    let OUTLINE_INFO: string;
    let OUTLINE_SUCCESS: string;
    let OUTLINE_DANGER: string;
    let OUTLINE_WARNING: string;
    let OUTLINE_PURPLE: string;
    let OUTLINE_DARK: string;
    let OUTLINE_LIGHT: string;
}
declare namespace variantsSubtle {
    let SUBTLE_PRIMARY: string;
    let SUBTLE_SECONDARY: string;
    let SUBTLE_SUCCESS: string;
    let SUBTLE_INFO: string;
    let SUBTLE_WARNING: string;
    let SUBTLE_DANGER: string;
    let SUBTLE_TERTIARY: string;
    let SUBTLE_MUTED: string;
}
declare namespace bgs$2 {
    let PRIMARY_1: string;
    export { PRIMARY_1 as PRIMARY };
    let SECONDARY_1: string;
    export { SECONDARY_1 as SECONDARY };
    let TERTIARY_1: string;
    export { TERTIARY_1 as TERTIARY };
    let SUCCESS_1: string;
    export { SUCCESS_1 as SUCCESS };
    let INFO_1: string;
    export { INFO_1 as INFO };
    let DANGER_1: string;
    export { DANGER_1 as DANGER };
    let WARNING_1: string;
    export { WARNING_1 as WARNING };
    let PURPLE_1: string;
    export { PURPLE_1 as PURPLE };
    export let MUTED: string;
}
declare const horizontals: (string | boolean)[];
declare namespace placements {
    let AUTO_START: string;
    let AUTO: string;
    let AUTO_END: string;
    let TOP_START: string;
    let TOP: string;
    let TOP_END: string;
    let RIGHT_START: string;
    let RIGHT: string;
    let RIGHT_END: string;
    let BOTTOM_END: string;
    let BOTTOM: string;
    let BOTTOM_START: string;
    let LEFT_END: string;
    let LEFT: string;
    let LEFT_START: string;
}
declare const colours: string[];
declare const gradients: string[];
declare const icons$1: {
    type: string;
    names: string[];
}[];
declare const colourshades: string[];

interface SpaceProps {
    className?: string;
    direction?: 'horizontal' | 'vertical';
    size?: string | 'sm' | 'lg';
    align?: 'start' | 'end' | 'center' | 'baseline';
    wrap?: boolean;
    style?: React.CSSProperties;
}
declare const Space: ({ className, direction, size, align, wrap, style, ...props }: SpaceProps) => React.JSX.Element;

declare const typographyColor: {
    PRIMARY: string;
    SECONDARY: string;
    SUCCESS: string;
    DANGER: string;
    WARNING: string;
    INFO: string;
    LIGHT: string;
    DARK: string;
    BODY: string;
    MUTED: string;
    WHITE: string;
    BLACK_50: string;
    WHITE_50: string;
};
declare const typographyBg: {
    PRIMARY: string;
    SECONDARY: string;
    SUCCESS: string;
    DANGER: string;
    WARNING: string;
    INFO: string;
    LIGHT: string;
    DARK: string;
    BODY: string;
    WHITE: string;
};
declare const typographyAlign: {
    START: string;
    CENTER: string;
    END: string;
};
declare const typographyTransform: {
    LOWERCASE: string;
    UPPERCASE: string;
    CAPITALIZE: string;
};
declare const typographySize: {
    FS_1: string;
    FS_2: string;
    FS_3: string;
    FS_4: string;
    FS_5: string;
    FS_6: string;
};
interface TypographyProps {
    className?: string;
    color?: keyof typeof typographyColor;
    emphasis?: boolean;
    bg?: keyof typeof typographyBg;
    align?: keyof typeof typographyAlign;
    transform?: keyof typeof typographyTransform;
    size?: keyof typeof typographySize;
    ellipsis?: boolean;
}
declare const Typography: ({ className, bg, color, emphasis, align, transform, size, ellipsis, ...props }: TypographyProps) => React.JSX.Element;

interface IconProps {
    name: string;
    onClick?: () => void;
    color?: string;
    className?: string;
}
declare const Icon: ({ name, color, onClick, className }: IconProps) => React.JSX.Element;
declare const FlagIcon: ({ name, onClick, className }: IconProps) => React.JSX.Element;

interface BadgeProps extends BadgeProps$1 {
    badge?: string;
    subtle?: boolean;
}
declare const Badge: ({ subtle, bg, children, badge, className, ...props }: BadgeProps) => React.JSX.Element;

interface ButtonProps extends ButtonProps$1 {
    iconName?: string;
    children?: any;
    size?: "sm" | undefined | "lg";
    opacity?: undefined | "0" | "25" | "50" | "75" | "100";
    disabled?: boolean;
    presentation?: "normal" | "outline" | "subtle";
}
declare const Button: ({ children, className, iconName, opacity, variant, presentation, ...props }: ButtonProps) => React.JSX.Element;

interface TextFieldProps extends Omit<FormControlProps, "onChange"> {
    children?: any;
    groupClassName?: string;
    size?: "sm" | "lg" | undefined;
    value?: string;
    onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
    onKeyDown?: (e: any) => void;
}
declare const TextField: ({ children, groupClassName, size, value, onChange, onKeyDown, ...props }: TextFieldProps) => React.JSX.Element;

interface LoadingProps extends SpinnerProps {
    open: boolean;
    background?: string;
}
declare const Loading: ({ className, open, background, variant, ...props }: LoadingProps) => false | React.JSX.Element;

interface TooltipProps extends TooltipProps$1 {
    containerClassName: string;
}
declare const Tooltip: ({ children, title, containerClassName, ...props }: TooltipProps) => React.JSX.Element;

interface SelectProps extends Omit<FormSelectProps, 'onChange'> {
    data: {
        id: string | number;
        name: string | number;
        disabled?: boolean;
    }[];
    value: string;
    onChange: (value: string, e: React.ChangeEvent<HTMLSelectElement>) => void;
}
declare const Select: ({ data, value, onChange, ...props }: SelectProps) => React.JSX.Element;

type Crumb = {
    title: React.ReactNode;
    href?: string;
};
interface BreadcrumbProps extends Omit<BreadcrumbProps$1, 'onClick'> {
    onClick?: (item: Crumb, e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
    data: Crumb[];
}
declare const Breadcrumb: ({ data, onClick, ...props }: BreadcrumbProps) => React.JSX.Element;

declare const icons: {
    confirm: React.JSX.Element;
    warning: React.JSX.Element;
    info: React.JSX.Element;
    error: React.JSX.Element;
};
interface ConfirmProps extends ModalProps$1 {
    title: string;
    children: React.ReactNode;
    show: boolean;
    centered: boolean;
    contentClassName: string;
    type: keyof typeof icons;
    noBtnText?: string;
    yesBtnText?: string;
    onSave?: () => void;
    onCancel?: () => void;
}
declare const Confirm: ({ title, children, onSave, onCancel, type, contentClassName, noBtnText, yesBtnText, ...props }: ConfirmProps) => React.JSX.Element;

type ToggleButtonRadioProps = {
    type: 'radio';
    options: Array<{
        [key: string]: string | JSX.Element;
    }>;
    value: string;
    onChange: (value: string, event: any) => void;
    name?: string;
    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'link';
    labelKey?: string;
    valueKey?: string;
};
type ToggleButtonCheckboxProps = {
    type: 'checkbox';
    options: Array<{
        [key: string]: string | JSX.Element;
    }>;
    value: Array<any>;
    onChange: (value: Array<any>) => void;
    name?: string;
    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'link';
    labelKey?: string;
    valueKey?: string;
};
type ToggleButtonGroupProps = ToggleButtonRadioProps | ToggleButtonCheckboxProps;
declare const ToggleButtonGroup: ({ options, type, name, value, onChange, variant, labelKey, valueKey, ...props }: ToggleButtonGroupProps) => React.JSX.Element;

interface PlaceholdersProps {
    children: React.ReactNode;
    className?: string;
    isMargin?: boolean;
}
declare const Placeholders: ({ children, className, isMargin, ...props }: PlaceholdersProps) => React.JSX.Element;

interface DropdownsProps {
    data: Array<{
        id: string;
        name: string;
        href?: string;
        disabled?: boolean;
    }>;
    value: string;
    defaultText: string;
    onChange: (value: string, event: any) => void;
    maxHeight: number | string;
    variant?: string;
    toggleValue?: string;
}
declare const Dropdowns: ({ data, defaultText, value, toggleValue, onChange, maxHeight, variant, ...props }: DropdownsProps) => React.JSX.Element;

interface DropdownsCheckProps {
    data: Array<{
        id: string;
        name: string;
        href?: string;
        disabled?: boolean;
    }>;
    groups?: {
        [key: string]: string[];
    };
    value?: string[];
    defaultText?: string;
    onChange?: (value: string[], e: any) => void;
    maxHeight?: number | string;
    disabled?: boolean;
    variant?: string;
    toggleValue?: string;
    multiple?: boolean;
}
declare const DropdownChecks: ({ data, groups, defaultText, multiple, value, toggleValue, onChange, maxHeight, disabled, variant, ...props }: DropdownsCheckProps) => React.JSX.Element;

interface PaginationsProps {
    count?: number;
    pageSize?: number;
    activeIndex?: number;
    onChange?: (index: number) => void;
    config?: 3 | 5 | 7 | 9 | 11;
    size?: 'sm' | 'lg';
}
declare const Paginations: ({ count, pageSize, activeIndex, onChange, config, size, ...props }: PaginationsProps) => React.JSX.Element;

interface TabProps extends TabsProps {
    tabs: any[];
    vertical?: boolean;
}
declare const Tabs: ({ tabs, vertical, ...props }: TabProps) => React.JSX.Element;

interface CheckboxGroupProps {
    data: Array<{
        id: string;
        name: string;
        disabled?: boolean;
    }>;
    name?: string;
    value: string[];
    type: 'list' | 'inline' | 'stack';
    onChange?: (values: string[], event: React.ChangeEvent<HTMLInputElement>) => void;
    inline?: boolean;
    flush?: boolean;
}
declare let CheckboxGroup: React.FC<CheckboxGroupProps>;

interface RadioGroupProps extends Omit<FormCheckProps, "onChange"> {
    data: {
        id: string;
        name: string;
        disabled?: boolean;
    }[];
    value: string;
    onChange?: (value: string, event: any) => void;
}
declare let RadioGroup: ({ data, value, onChange, name, inline, ...props }: RadioGroupProps) => React.JSX.Element;

interface ToastProps extends ToastProps$1 {
    header?: React.ReactNode;
    position?: ToastPosition;
}
declare const Toasts: ({ header, position, delay, children, ...props }: ToastProps) => React.JSX.Element;

interface SearchProps extends TextFieldProps {
    onSearch?: (value: string) => void;
    inputClassName?: string;
    buttonStyle?: "icon" | "text";
    buttonClassName?: string;
    searchOnReset?: boolean;
    status?: "" | "loading" | "disabled";
}
declare const Search: ({ value, onChange, onKeyDown, onSearch, className, inputClassName, buttonClassName, buttonStyle, searchOnReset, status, ...props }: SearchProps) => React.JSX.Element;

interface ListGroupProps extends Omit<ListGroupProps$1, "onChange"> {
    data: {
        id: string;
        name: string;
        disabled?: boolean;
    }[];
    value: string;
    action?: boolean;
    flush?: boolean;
    onChange?: (value: string, event: any) => void;
}
declare const ListGroup: ({ action, data, value, onChange, flush, ...props }: ListGroupProps) => React.JSX.Element;

interface PopoversProps extends Omit<OverlayTriggerProps, "overlay" | "onHide" | "children"> {
    children: React.ReactNode;
    title: React.ReactNode;
    component: React.ReactNode;
    containerClassName: string;
    backdrop: boolean;
    onHide?: () => void;
}
declare const Popovers: (props: PopoversProps) => React.JSX.Element;

interface CountryButtonProps {
    countryCode: string;
    badge: string;
    subtle?: boolean;
    badgeVariant?: string;
    buttonVariant?: string;
    buttonPresentation?: 'normal' | 'outline' | 'subtle';
    href?: string;
    onClick?: () => void;
}
declare const CountryButton: ({ countryCode, badge, subtle, badgeVariant, buttonVariant, buttonPresentation, href, onClick }: CountryButtonProps) => React.JSX.Element;

interface AccordionProps extends AccordionProps$1 {
    options: Array<{
        id: string;
        title: React.ReactNode;
        component: React.ReactNode;
        bodyOptions?: AccordionBodyProps;
    }>;
}
declare const Accordion: ({ options, ...props }: AccordionProps) => React.JSX.Element;

type bgs$1 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light';
interface CardProps extends CardProps$1 {
    width?: number | string;
    header?: any;
    imagevariant?: 'top' | 'bottom' | undefined;
    image?: string;
    headerclasses?: string;
    footerclasses?: string;
    orientation?: 'horizontal' | 'vertical' | undefined;
    textBg?: bgs$1 | undefined;
    border?: bgs$1;
    title?: string;
    body?: any;
    children?: React.ReactNode;
    maxWidth?: number | string;
    footer?: any;
    tags?: {
        name: string;
        bg: bgs$1;
    }[];
    buttons?: {
        name: string;
        iconName: string;
        variant: bgs$1;
    }[];
}
declare const Card: (props: CardProps) => React.JSX.Element;

type bgs = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light';
interface DataCardProps extends Omit<CardProps$1, 'title'> {
    header?: any;
    image?: React.ReactNode;
    title?: React.ReactNode;
    href?: string;
    body?: any;
    children?: React.ReactNode;
    footer?: any;
    tags?: {
        name: string;
        bg: bgs;
        icon?: string;
    }[];
    inlinetags?: {
        name: string;
        bg: bgs;
        icon?: string;
    }[];
    sourcetags?: {
        name: string;
        bg: bgs;
        icon?: string;
    }[];
    buttons?: any;
    variant?: 'basic' | 'flip' | 'slide';
    imagevariant?: 'top' | 'bottom';
    icons?: any;
}
declare const Datacard: (props: DataCardProps) => React.JSX.Element;

interface CarouselProps extends CarouselProps$1 {
    data: Array<{
        id: string;
        src: string;
        title: string;
        subTitle: string;
    }>;
    maxHeight?: number | string;
    minHeight?: number | string;
}
declare const Carousel: ({ data, maxHeight, minHeight, ...props }: CarouselProps) => React.JSX.Element;

interface FlipProps {
    children?: React.ReactNode;
    orientation?: 'horizontal' | 'vertical' | undefined;
    className?: string | undefined;
}
declare const Flip: ({ children, orientation, className, ...props }: FlipProps) => React.JSX.Element;

interface IntroBannerProps {
    children?: React.ReactNode;
    src?: string;
    title?: React.ReactNode;
}
declare const IntroBanner: ({ children, title, ...props }: IntroBannerProps) => React.JSX.Element;

interface Column {
    title: string;
    dataIndex: string;
    render?: (value: any, row: any) => React.ReactNode;
}
interface TablesProps extends Omit<TableProps, "onChange"> {
    data: Array<Object>;
    columns: Array<Column>;
    rowKey: string;
    value: string;
    onChange: (value: string, event: React.MouseEvent, rowData: Object) => void;
    ellipsis: boolean;
    className: string;
    maxHeight: string;
    theadClassName: string;
    pagination: boolean;
    PaginationsProps: PaginationsProps;
    renderDataNotFound: (className: string) => React.ReactNode;
    size?: 'sm' | 'lg';
}
declare const Tables: ({ data: initData, columns, rowKey, value, onChange, ellipsis, className, maxHeight, theadClassName, pagination, PaginationsProps: initPaginationsProps, renderDataNotFound, variant, ...props }: TablesProps) => React.JSX.Element;

interface ModalProps extends ModalProps$1 {
    title: any;
    children: any;
    footer: any;
    show: boolean;
    backdrop: boolean;
    onHide?: () => void;
    onSave?: () => void;
    onCancel?: () => void;
}
declare const Modal: ({ title, children, footer, show, onHide, onSave, onCancel, backdrop, ...props }: ModalProps) => React.JSX.Element;

interface NavbarProps extends NavbarProps$1 {
    Brand?: React.ReactElement | ((props: any) => React.JSX.Element | undefined | null) | undefined | null;
    Search?: React.ReactElement | ((props: any) => React.JSX.Element | undefined | null) | undefined | null;
    brandClassName?: string | undefined;
    navClassName?: string | undefined;
    toggleClassName?: string | undefined;
    alignNav?: "start" | "center" | "end";
}
declare const Navbar: {
    (props: NavbarProps): React.JSX.Element;
    Link: react_bootstrap_esm_helpers.BsPrefixRefForwardingComponent<"a", react_bootstrap.NavLinkProps>;
    Dropdown: react_bootstrap_esm_helpers.BsPrefixRefForwardingComponent<"div", react_bootstrap.NavDropdownProps> & {
        Item: react_bootstrap_esm_helpers.BsPrefixRefForwardingComponent<"a", react_bootstrap.DropdownItemProps>;
        ItemText: react_bootstrap_esm_helpers.BsPrefixRefForwardingComponent<"span", react_bootstrap.DropdownItemTextProps>;
        Divider: react_bootstrap_esm_helpers.BsPrefixRefForwardingComponent<"hr", react_bootstrap.DropdownDividerProps>;
        Header: react_bootstrap_esm_helpers.BsPrefixRefForwardingComponent<"div", react_bootstrap.DropdownHeaderProps>;
    };
    Divider: react_bootstrap_esm_helpers.BsPrefixRefForwardingComponent<"hr", react_bootstrap.DropdownDividerProps>;
};

interface SearchBarProps extends SearchProps {
    onSearch: (value: string) => void;
}
declare const SearchBar: ({ onSearch, ...props }: SearchBarProps) => React.JSX.Element;

interface SlideProps {
    children?: React.ReactNode;
    className?: string | undefined;
}
declare const Slide: ({ children, className, ...props }: SlideProps) => React.JSX.Element;

interface TreeViewItemProps {
    id: string;
    title: JSX.Element | string;
    onClick?: (id: string) => void;
    toggleOnClick?: boolean;
    isOpenDefault?: boolean;
    children?: Array<TreeViewItemProps>;
    className?: string;
    buttonVariant?: string;
    buttonClassName?: string;
    iconNames?: [string, string];
}
interface TreeViewProps {
    className?: string;
    buttonVariant?: 'default' | 'right' | 'far-right';
    data: Array<TreeViewItemProps>;
}
declare const TreeView: ({ data, buttonVariant, ...props }: TreeViewProps) => React.JSX.Element;

interface SlickCarouselProps {
    children: React.ReactNode;
    slidesToShow?: number;
    slidesToScroll?: number;
    autoplay?: boolean;
    autoplaySpeed?: number;
    dots?: boolean;
    arrows?: boolean;
    infinite?: boolean;
    className?: string;
    responsive?: Array<{
        breakpoint: number;
        settings: {
            slidesToShow: number;
            slidesToScroll: number;
        };
    }>;
}
declare const SlickCarousel: ({ children, slidesToShow, slidesToScroll, autoplay, autoplaySpeed, dots, arrows, infinite, className, responsive, }: SlickCarouselProps) => React.JSX.Element;

type Breakpoint = "sm" | "md" | "lg" | "xl" | "xxl";
interface HeaderProps {
    className?: string | undefined;
    Brand?: React.ReactElement | ((props: any) => React.JSX.Element | undefined | null) | undefined | null;
    PrimaryItems?: React.ReactElement[] | React.ReactElement | ((props: any) => React.JSX.Element | undefined | null) | undefined | null;
    SecondaryItems?: React.ReactElement[] | React.ReactElement | ((props: any) => React.JSX.Element | undefined | null) | undefined | null;
    SearchComponent?: React.ReactElement | ((props: any) => React.JSX.Element | undefined | null) | undefined | null;
    BannerComponent?: React.ReactElement | ((props: any) => React.JSX.Element | undefined | null) | undefined | null;
    breakpoint?: Breakpoint;
    alignNav?: "start" | "center" | "end";
}
declare const Header: (props: HeaderProps) => React.JSX.Element;

interface FooterProps {
    children?: React.ReactNode;
    copyright?: React.ReactNode;
}
declare const Footer: {
    ({ children, copyright }: FooterProps): React.JSX.Element;
    Heading: ({ title, children }: {
        title: string;
        children?: React.ReactNode;
    }) => React.JSX.Element;
    Link: ({ href, className, children, ...props }: NavLinkProps) => React.JSX.Element;
};

interface CanvasProps extends OffcanvasProps {
    title: string;
}
declare const Canvas: ({ title, children, ...props }: CanvasProps) => React.JSX.Element;

export { Accordion, Badge, Breadcrumb, Button, Canvas, Card, Carousel, CheckboxGroup, Confirm, CountryButton, Datacard, DropdownChecks, Dropdowns, FlagIcon, Flip, Footer, Header, Icon, IntroBanner, ListGroup, Loading, Modal, Navbar, Paginations, Placeholders, Popovers, RadioGroup, Search, SearchBar, Select, SlickCarousel, Slide, Space, Tables, Tabs, TextField, Toasts, ToggleButtonGroup, Tooltip, TreeView, Typography, bgs$2 as bgs, colours, colourshades, gradients, horizontals, icons$1 as icons, placements, typographyAlign, typographyBg, typographyColor, typographySize, typographyTransform, variants, variantsOutline, variantsSubtle };
export type { AccordionProps, BadgeProps, BreadcrumbProps, ButtonProps, CanvasProps, CardProps, CarouselProps, CheckboxGroupProps, Column, ConfirmProps, CountryButtonProps, Crumb, DataCardProps, DropdownsCheckProps, DropdownsProps, FlipProps, FooterProps, HeaderProps, IconProps, IntroBannerProps, ListGroupProps, LoadingProps, ModalProps, NavbarProps, PaginationsProps, PlaceholdersProps, PopoversProps, RadioGroupProps, SearchBarProps, SearchProps, SelectProps, SlickCarouselProps, SlideProps, TabProps, TablesProps, TextFieldProps, ToastProps, ToggleButtonGroupProps, TooltipProps, TreeViewItemProps, TreeViewProps };