@ballistix.digital/react-components 0.1.6 → 0.1.7

package/dist/index.d.ts

@@ -0,0 +1,595 @@
+import React, { FC, ReactNode, ReactElement } from 'react';
+import { Menu } from '@headlessui/react';
+
+type StylesType$f = {
+    loading?: string;
+    empty?: string;
+    placeholder?: string;
+    container?: string;
+    indicator?: string;
+    spinner?: string;
+};
+
+interface Props$e {
+    src?: string | undefined;
+    placeholder?: string | undefined;
+    children?: ReactNode | ReactNode[] | string;
+    url?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    figure?: 'block' | 'rounded';
+    status?: 'offline' | 'online' | 'blocked';
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    styles?: StylesType$f;
+}
+declare const AvatarElement: FC<Props$e>;
+
+type StylesType$e = {
+    container?: string;
+};
+
+interface Props$d {
+    children: string | ReactNode;
+    type?: 'primary' | 'secondary' | 'outline';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    figure?: 'block' | 'rounded';
+    status?: 'idle' | 'loading' | 'success' | 'error';
+    isDisabled?: boolean;
+    styles?: StylesType$e;
+    onClick: () => void;
+}
+declare const ButtonElement: FC<Props$d>;
+
+type StylesType$d = {
+    container?: string;
+    firstButton?: string;
+    button?: string;
+    lastButton?: string;
+};
+
+interface Props$c {
+    children: ReactElement[];
+    styles?: StylesType$d;
+}
+declare const ButtonGroupElement: FC<Props$c>;
+
+type StylesType$c = {
+    container?: string;
+    button?: string;
+    compact?: string;
+    dots?: string;
+    items?: string;
+    left?: string;
+    right?: string;
+};
+
+interface Props$b {
+    children: ReactElement | ReactElement[];
+    label: string;
+    type?: 'button' | 'compact';
+    direction?: 'left' | 'right';
+    styles?: StylesType$c;
+}
+declare const DropdownElement: {
+    Container: FC<Props$b>;
+    Item: typeof Menu.Item;
+};
+
+type StylesType$b = {
+    container?: string;
+    indicator?: string;
+    button?: string;
+};
+
+interface Props$a {
+    children: string | ReactNode;
+    color?: 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
+    type?: 'normal' | 'indicator' | 'close';
+    size?: 'sm' | 'lg';
+    figure?: 'block' | 'rounded';
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    onClose?: () => void;
+    styles?: StylesType$b;
+}
+declare const BadgeElement: FC<Props$a>;
+
+type StylesType$a = {
+    container?: string;
+    content?: string;
+};
+
+interface Props$9 {
+    children: ReactNode;
+    type?: 'break' | 'center' | 'fill';
+    styles?: StylesType$a;
+}
+declare const ContainerLayout: FC<Props$9>;
+
+type StylesType$9 = {
+    container?: string;
+    head?: string;
+    line?: string;
+    body?: string;
+    content?: string;
+};
+
+interface Props$8 {
+    children: ReactNode;
+    type?: 'left' | 'center' | 'right';
+    styles?: StylesType$9;
+}
+declare const DividerLayout: FC<Props$8>;
+
+type StylesType$8 = {
+    container?: string;
+    list?: string;
+    item?: string;
+};
+
+interface Props$7 {
+    children: ReactElement | ReactElement[];
+    type?: 'fill' | 'fill-sticky' | 'center' | 'center-sticky' | 'card' | 'card-sticky';
+    styles?: StylesType$8;
+}
+declare const ListContainerLayout: FC<Props$7>;
+
+type StylesType$7 = {
+    container?: string;
+    figure?: string;
+    svg?: string;
+    title?: string;
+    paragraph?: string;
+};
+
+interface Props$6 {
+    title: string;
+    paragraph: string;
+    figure?: ReactNode;
+    type?: 'top' | 'top-reversed' | 'center' | 'center-reversed' | 'bottom' | 'bottom-reversed' | 'stretch' | 'stretch-reversed' | 'responsive' | 'responsive-reversed' | 'wide' | 'wide-reversed';
+    styles?: StylesType$7;
+}
+declare const MediaObjectLayout: FC<Props$6>;
+
+type StylesType$6 = {
+    container?: string;
+    section?: string;
+};
+
+interface ContainerProps$3 {
+    children: ReactNode;
+    type?: 'normal' | 'sticky';
+    styles?: StylesType$6;
+}
+interface HeadProps {
+    children: ReactNode;
+    styles?: StylesType$6;
+}
+declare const LayoutPanel: {
+    Container: React.FC<ContainerProps$3>;
+    Section: React.FC<HeadProps>;
+};
+
+type StylesType$5 = {
+    slashes?: {
+        container?: string;
+        list?: string;
+        separator?: string;
+        home?: {
+            container?: string;
+            content?: string;
+            link?: string;
+            icon?: string;
+            span?: string;
+        };
+        page?: {
+            container?: string;
+            content?: string;
+            link?: string;
+            span?: string;
+        };
+    };
+    chevrons?: {
+        container?: string;
+        list?: string;
+        separator?: string;
+        home?: {
+            container?: string;
+            content?: string;
+            link?: string;
+            icon?: string;
+            span?: string;
+        };
+        page?: {
+            container?: string;
+            content?: string;
+            link?: string;
+            span?: string;
+        };
+    };
+    panel?: {
+        container?: string;
+        list?: string;
+        separator?: string;
+        home?: {
+            container?: string;
+            content?: string;
+            link?: string;
+            icon?: string;
+            span?: string;
+        };
+        page?: {
+            container?: string;
+            content?: string;
+            link?: string;
+            span?: string;
+        };
+    };
+    bar?: {
+        container?: string;
+        list?: string;
+        separator?: string;
+        home?: {
+            container?: string;
+            content?: string;
+            link?: string;
+            icon?: string;
+            span?: string;
+        };
+        page?: {
+            container?: string;
+            content?: string;
+            link?: string;
+            span?: string;
+        };
+    };
+};
+
+interface Props$5 {
+    href: string;
+    pages: {
+        name: string;
+        href: string;
+        isCurrent: boolean;
+    }[];
+    type?: 'slashes' | 'chevrons' | 'panel' | 'bar';
+    separator?: ReactNode;
+    styles?: StylesType$5;
+}
+declare const BreadcrumbsNavigation: FC<Props$5>;
+
+type StylesType$4 = {
+    container?: string;
+    mobile?: {
+        container?: string;
+        button?: string;
+    };
+    desktop?: {
+        container?: string;
+        leftButton?: string;
+        rightButton?: string;
+        navigation?: string;
+    };
+    button?: {
+        default?: string;
+        active?: string;
+        disabled?: string;
+    };
+    divider?: string;
+    label: string;
+    icon: string;
+};
+
+interface Props$4 {
+    min?: number;
+    max: number;
+    children: ({ min, max, current, }: {
+        min: number;
+        max: number;
+        current: number;
+    }) => ReactNode;
+    styles?: StylesType$4;
+    onChange?: (current: number) => void;
+}
+declare const PanelPaginationNavigation: React.FC<Props$4>;
+
+type StylesType$3 = {
+    container?: string;
+    left?: {
+        container?: string;
+        button?: string;
+        icon?: string;
+    };
+    center?: {
+        container?: string;
+    };
+    right?: {
+        container?: string;
+        button?: string;
+        icon?: string;
+    };
+    button?: {
+        default?: string;
+        active?: string;
+        disabled?: string;
+    };
+    divider?: string;
+};
+
+interface Props$3 {
+    min?: number;
+    max: number;
+    styles?: StylesType$3;
+    onChange?: (current: number) => void;
+}
+declare const PagePaginationNavigation: React.FC<Props$3>;
+
+type ContainerStylesType$2 = {
+    root?: string;
+    panel?: string;
+    container?: string;
+    content?: string;
+};
+type NavigationStylesType$2 = {
+    list?: string;
+};
+
+interface ContainerProps$2 {
+    children: ({ active, setActive, }: {
+        active: string;
+        setActive: any;
+    }) => ReactNode | ReactNode[];
+    styles?: ContainerStylesType$2;
+}
+interface ListProps {
+    children: ReactNode | ReactNode[];
+    active: string;
+    setActive: any;
+    styles?: NavigationStylesType$2;
+}
+interface ItemProps {
+    accessor: string;
+    href?: string;
+    type?: string;
+    children: ReactNode;
+    isCurrent?: boolean;
+    isInitial?: boolean;
+    onClick?: (accessor: any) => void;
+}
+interface FooterProps {
+    children: ReactNode | ReactNode[];
+    styles?: NavigationStylesType$2;
+}
+declare const SidebarNavigation: {
+    Container: React.FC<ContainerProps$2>;
+    List: React.FC<ListProps>;
+    Item: React.FC<ItemProps>;
+    Footer: React.FC<FooterProps>;
+};
+
+type ContainerStylesType$1 = {
+    container: string;
+};
+type NavigationStylesType$1 = {
+    select?: string;
+    navigation?: string;
+};
+
+interface ContainerProps$1 {
+    children: ({ active, setActive, }: {
+        active: string;
+        setActive: any;
+    }) => ReactNode | ReactNode[];
+    styles?: ContainerStylesType$1;
+}
+interface NavigationProps$1 {
+    children: ReactNode | ReactNode[];
+    active: string;
+    setActive: any;
+    styles?: NavigationStylesType$1;
+}
+interface NavigationItemProps$1 {
+    accessor: string;
+    href?: string;
+    type?: string;
+    children: ReactNode;
+    isCurrent?: boolean;
+    isInitial?: boolean;
+    onClick?: (accessor: any) => void;
+}
+interface ViewProps$1 {
+    children: ReactNode | ReactNode[];
+}
+declare const TabNavigation: {
+    Container: React.FC<ContainerProps$1>;
+    List: React.FC<NavigationProps$1>;
+    Item: React.FC<NavigationItemProps$1>;
+    View: React.FC<ViewProps$1>;
+};
+
+type ContainerStylesType = {
+    container: string;
+};
+type NavigationStylesType = {
+    list?: string;
+};
+
+interface ContainerProps {
+    children: ({ active, setActive, }: {
+        active: string;
+        setActive: any;
+    }) => ReactNode | ReactNode[];
+    styles?: ContainerStylesType;
+}
+interface NavigationProps {
+    children: ReactNode | ReactNode[];
+    active: string;
+    setActive: any;
+    styles?: NavigationStylesType;
+}
+interface NavigationItemProps {
+    accessor: string;
+    href?: string;
+    type?: string;
+    children: ReactNode;
+    isCurrent?: boolean;
+    isInitial?: boolean;
+    onClick?: (accessor: any) => void;
+}
+interface ViewProps {
+    children: ReactNode | ReactNode[];
+}
+declare const VerticalNavigation: {
+    Container: React.FC<ContainerProps>;
+    List: React.FC<NavigationProps>;
+    Item: React.FC<NavigationItemProps>;
+    View: React.FC<ViewProps>;
+};
+
+type StylesType$2 = {
+    container?: string;
+    background?: {
+        container?: string;
+        transition?: {
+            enter?: string;
+            enterFrom?: string;
+            enterTo?: string;
+            leave?: string;
+            leaveFrom?: string;
+            leaveTo?: string;
+        };
+    };
+    layout?: {
+        container?: string;
+        content?: string;
+    };
+    panel?: {
+        container?: string;
+        transition?: {
+            enter?: string;
+            enterFrom?: string;
+            enterTo?: string;
+            leave?: string;
+            leaveFrom?: string;
+            leaveTo?: string;
+        };
+    };
+};
+
+interface Props$2 {
+    trigger?: ({ onOpen, onClose, }: {
+        onOpen: () => void;
+        onClose: () => void;
+    }) => ReactNode;
+    children: ({ onOpen, onClose, }: {
+        onOpen: () => void;
+        onClose: () => void;
+    }) => ReactNode;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    styles?: StylesType$2;
+}
+declare const ModalOverlay: FC<Props$2>;
+
+type StylesType$1 = {
+    container?: {
+        outer?: string;
+        inner?: string;
+    };
+    item?: {
+        container?: string;
+        background?: {
+            container?: string;
+            transition?: {
+                enter?: string;
+                enterFrom?: string;
+                enterTo?: string;
+                leave?: string;
+                leaveFrom?: string;
+                leaveTo?: string;
+            };
+        };
+        layout?: {
+            container?: string;
+            content?: string;
+            inner?: string;
+        };
+        panel?: {
+            container?: string;
+            transition?: {
+                enter?: string;
+                enterFrom?: string;
+                enterTo?: string;
+                leave?: string;
+                leaveFrom?: string;
+                leaveTo?: string;
+            };
+        };
+    };
+};
+
+interface Props$1 {
+    trigger?: ({ onOpen, onClose, }: {
+        onOpen: () => void;
+        onClose: () => void;
+    }) => ReactNode;
+    children: ({ onOpen, onClose, }: {
+        onOpen: () => void;
+        onClose: () => void;
+    }) => ReactNode;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    styles?: StylesType$1;
+}
+declare const _default: {
+    Container: ({ children, styles: customStyles, }: {
+        children: React.ReactNode;
+        styles?: StylesType$1 | undefined;
+    }) => JSX.Element;
+    Item: React.FC<Props$1>;
+};
+
+type StylesType = {
+    container?: string;
+    background?: {
+        container?: string;
+        transition?: {
+            enter?: string;
+            enterFrom?: string;
+            enterTo?: string;
+            leave?: string;
+            leaveFrom?: string;
+            leaveTo?: string;
+        };
+    };
+    layout?: {
+        container?: string;
+        content?: string;
+        inner?: string;
+    };
+    panel?: {
+        container?: string;
+        transition?: {
+            enter?: string;
+            enterFrom?: string;
+            enterTo?: string;
+            leave?: string;
+            leaveFrom?: string;
+            leaveTo?: string;
+        };
+    };
+};
+
+interface Props {
+    trigger?: ({ onOpen, onClose, }: {
+        onOpen: () => void;
+        onClose: () => void;
+    }) => ReactNode;
+    children: ({ onOpen, onClose, }: {
+        onOpen: () => void;
+        onClose: () => void;
+    }) => ReactNode;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    styles?: StylesType;
+}
+declare const SlideOverOverlay: FC<Props>;
+
+export { AvatarElement as Avatar, BadgeElement as Badge, BreadcrumbsNavigation as Breadcrumbs, ButtonElement as Button, ButtonGroupElement as ButtonGroup, ContainerLayout as Container, DividerLayout as Divider, DropdownElement as Dropdown, ListContainerLayout as ListContainer, MediaObjectLayout as MediaObject, ModalOverlay as Modal, _default as Notification, PagePaginationNavigation as PagePagination, LayoutPanel as Panel, PanelPaginationNavigation as PanelPagination, SidebarNavigation as Sidebar, SlideOverOverlay as SlideOver, TabNavigation as Tab, VerticalNavigation as Vertical };