@paygreen/pgui 2.0.0 → 2.1.2

package/dist/esm/types/components/ActionsButton/index.d.ts

@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { IconButtonProps } from '@chakra-ui/react';
+export declare type ActionsButtonProps = Omit<IconButtonProps, 'aria-label'> & {
+    label: string;
+};
+export declare const ActionsButton: FC<React.PropsWithChildren<ActionsButtonProps>>;

package/dist/esm/types/components/DataList/index.d.ts

@@ -0,0 +1,42 @@
+import React, { FC } from 'react';
+import { AccordionProps, FlexProps } from '@chakra-ui/react';
+declare type DataListColumns = Record<string, DataListCellProps>;
+declare type DataListContextValue = {
+    setColumns: React.Dispatch<React.SetStateAction<DataListColumns>>;
+    columns: DataListColumns;
+    isHover: boolean;
+};
+export declare const DataListContext: React.Context<DataListContextValue>;
+export declare const DataListHeaderContext: React.Context<boolean>;
+export declare type DataListCellProps = FlexProps & {
+    colName?: string;
+    colWidth?: string | number | Record<string, string | number>;
+    isVisible?: boolean | boolean[] | Record<string, boolean>;
+};
+export declare const DataListCell: ({ children, colName, colWidth, isVisible, ...rest }: DataListCellProps) => JSX.Element | null;
+export declare const DataListAccordion: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+export declare const DataListAccordionButton: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+export declare const DataListAccordionIcon: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+export declare const DataListAccordionPanel: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+export declare type DataListRowProps = FlexProps & {
+    isVisible?: boolean | boolean[] | Record<string, boolean>;
+    isDisabled?: boolean;
+};
+export declare const DataListRow: FC<React.PropsWithChildren<DataListRowProps>>;
+export declare type DataListHeaderProps = DataListRowProps;
+export declare const DataListHeader: FC<React.PropsWithChildren<DataListHeaderProps>>;
+export declare type DataListFooterProps = DataListRowProps;
+export declare const DataListFooter: FC<React.PropsWithChildren<DataListFooterProps>>;
+export declare type DataListProps = AccordionProps & {
+    isHover?: boolean;
+};
+export declare const DataList: FC<React.PropsWithChildren<DataListProps>>;
+export {};

package/dist/esm/types/components/FormGroup/index.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { FormControlProps } from '@chakra-ui/react';
+export declare type FormGroupProps = Omit<FormControlProps, 'onChange' | 'defaultValue' | 'label'> & {
+    children?: ReactNode;
+    errorMessage?: ReactNode;
+    helper?: ReactNode;
+    id?: string;
+    isRequired?: boolean;
+    label?: ReactNode;
+    showError?: boolean;
+};
+export declare const FormGroup: ({ children, errorMessage, helper, id, isRequired, label, showError, ...props }: FormGroupProps) => JSX.Element;

package/dist/esm/types/components/Pagination/index.d.ts

@@ -0,0 +1,43 @@
+import React, { FC } from 'react';
+import { IconButtonProps, StackProps } from '@chakra-ui/react';
+export declare const getPaginationInfo: ({ page, pageSize, totalItems, }: {
+    page?: number | undefined;
+    pageSize?: number | undefined;
+    totalItems?: number | undefined;
+}) => {
+    firstPage: number;
+    lastPage: number;
+    firstItemOnPage: number;
+    lastItemOnPage: number;
+    isFirstPage: boolean;
+    isLastPage: boolean;
+};
+export declare type PaginationContextValue<PageType = number> = {
+    page: PageType;
+    setPage: (page: PageType) => void;
+    firstPage: PageType;
+    isFirstPage: boolean;
+    lastPage: PageType;
+    isLastPage: boolean;
+    totalItems: number;
+    isLoadingPage: boolean;
+    pageSize: number;
+    firstItemOnPage: number;
+    lastItemOnPage: number;
+};
+export declare const PaginationContext: React.Context<PaginationContextValue<number>>;
+export declare const PaginationButtonFirstPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+export declare const PaginationButtonPrevPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+export declare const PaginationButtonLastPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+export declare const PaginationButtonNextPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+export declare const PaginationInfo: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+export declare type PaginationProps = StackProps & {
+    setPage: (page: number) => void;
+    page?: number;
+    pageSize?: number;
+    totalItems?: number;
+    isLoadingPage?: boolean;
+};
+export declare const Pagination: ({ setPage, page, pageSize, totalItems, isLoadingPage, ...rest }: PaginationProps) => JSX.Element;

package/dist/esm/types/components/SearchInput/index.d.ts

@@ -0,0 +1,11 @@
+import { InputProps } from '@chakra-ui/react';
+declare type CustomProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?(value?: string): void;
+    delay?: number;
+    clearLabel?: string;
+};
+declare type SearchInputProps = Overwrite<InputProps, CustomProps>;
+export declare const SearchInput: import("@chakra-ui/react").ComponentWithAs<"input", SearchInputProps>;
+export {};

package/dist/esm/types/components/Select/index.d.ts

@@ -0,0 +1,114 @@
+import React, { ReactNode } from 'react';
+import { BoxProps } from '@chakra-ui/react';
+import { GroupBase, Props } from 'react-select';
+declare module 'react' {
+    function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}
+export declare type SelectProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = {
+    isAsync?: boolean;
+    isCreatable?: boolean;
+    isError?: boolean;
+    size?: string;
+    formatCreateLabel?: (inputValue: string) => ReactNode;
+    loadOptions?: (input: unknown) => TODO;
+    defaultOptions?: unknown | boolean;
+    debounceDelay?: number;
+} & Props<Option, IsMulti, Group> & Omit<BoxProps, 'defaultValue'>;
+export declare const Select: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: {
+    isAsync?: boolean | undefined;
+    isCreatable?: boolean | undefined;
+    isError?: boolean | undefined;
+    size?: string | undefined;
+    formatCreateLabel?: ((inputValue: string) => ReactNode) | undefined;
+    loadOptions?: ((input: unknown) => TODO) | undefined;
+    defaultOptions?: unknown | boolean;
+    debounceDelay?: number | undefined;
+} & Omit<Pick<import("react-select/dist/declarations/src/Select").Props<Option, IsMulti, Group>, "aria-label" | "form" | "autoFocus" | "name" | "value" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme"> & {
+    placeholder?: React.ReactNode;
+    tabIndex?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    isLoading?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, Group>> | undefined;
+    pageSize?: number | undefined;
+    backspaceRemovesValue?: boolean | undefined;
+    blurInputOnSelect?: boolean | undefined;
+    captureMenuScroll?: boolean | undefined;
+    closeMenuOnSelect?: boolean | undefined;
+    closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
+    controlShouldRenderValue?: boolean | undefined;
+    escapeClearsValue?: boolean | undefined;
+    filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<Option>, inputValue: string) => boolean) | null | undefined;
+    formatGroupLabel?: ((group: Group) => React.ReactNode) | undefined;
+    getOptionLabel?: import("react-select").GetOptionLabel<Option> | undefined;
+    getOptionValue?: import("react-select").GetOptionValue<Option> | undefined;
+    isOptionDisabled?: ((option: Option, selectValue: import("react-select").Options<Option>) => boolean) | undefined;
+    isMulti?: IsMulti | undefined;
+    isRtl?: boolean | undefined;
+    isSearchable?: boolean | undefined;
+    loadingMessage?: ((obj: {
+        inputValue: string;
+    }) => React.ReactNode) | undefined;
+    minMenuHeight?: number | undefined;
+    maxMenuHeight?: number | undefined;
+    menuIsOpen?: boolean | undefined;
+    menuPlacement?: import("react-select").MenuPlacement | undefined;
+    menuPosition?: import("react-select").MenuPosition | undefined;
+    menuShouldBlockScroll?: boolean | undefined;
+    menuShouldScrollIntoView?: boolean | undefined;
+    noOptionsMessage?: ((obj: {
+        inputValue: string;
+    }) => React.ReactNode) | undefined;
+    openMenuOnFocus?: boolean | undefined;
+    openMenuOnClick?: boolean | undefined;
+    options?: import("react-select").OptionsOrGroups<Option, Group> | undefined;
+    screenReaderStatus?: ((obj: {
+        count: number;
+    }) => string) | undefined;
+    styles?: import("react-select").StylesConfig<Option, IsMulti, Group> | undefined;
+    tabSelectsValue?: boolean | undefined;
+} & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<Option, IsMulti, Group>, "aria-label" | "form" | "autoFocus" | "name" | "value" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme"> & {
+    placeholder?: React.ReactNode;
+    tabIndex?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    isLoading?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, Group>> | undefined;
+    pageSize?: number | undefined;
+    backspaceRemovesValue?: boolean | undefined;
+    blurInputOnSelect?: boolean | undefined;
+    captureMenuScroll?: boolean | undefined;
+    closeMenuOnSelect?: boolean | undefined;
+    closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
+    controlShouldRenderValue?: boolean | undefined;
+    escapeClearsValue?: boolean | undefined;
+    filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<Option>, inputValue: string) => boolean) | null | undefined;
+    formatGroupLabel?: ((group: Group) => React.ReactNode) | undefined;
+    getOptionLabel?: import("react-select").GetOptionLabel<Option> | undefined;
+    getOptionValue?: import("react-select").GetOptionValue<Option> | undefined;
+    isOptionDisabled?: ((option: Option, selectValue: import("react-select").Options<Option>) => boolean) | undefined;
+    isMulti?: IsMulti | undefined;
+    isRtl?: boolean | undefined;
+    isSearchable?: boolean | undefined;
+    loadingMessage?: ((obj: {
+        inputValue: string;
+    }) => React.ReactNode) | undefined;
+    minMenuHeight?: number | undefined;
+    maxMenuHeight?: number | undefined;
+    menuIsOpen?: boolean | undefined;
+    menuPlacement?: import("react-select").MenuPlacement | undefined;
+    menuPosition?: import("react-select").MenuPosition | undefined;
+    menuShouldBlockScroll?: boolean | undefined;
+    menuShouldScrollIntoView?: boolean | undefined;
+    noOptionsMessage?: ((obj: {
+        inputValue: string;
+    }) => React.ReactNode) | undefined;
+    openMenuOnFocus?: boolean | undefined;
+    openMenuOnClick?: boolean | undefined;
+    options?: import("react-select").OptionsOrGroups<Option, Group> | undefined;
+    screenReaderStatus?: ((obj: {
+        count: number;
+    }) => string) | undefined;
+    styles?: import("react-select").StylesConfig<Option, IsMulti, Group> | undefined;
+    tabSelectsValue?: boolean | undefined;
+} & {}> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<Option> & Omit<BoxProps, "defaultValue"> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;

package/dist/esm/types/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ActionsButton';
+export * from './DataList';
+export * from './FormGroup';
+export * from './Pagination';
+export * from './SearchInput';
+export * from './Select';

package/dist/esm/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './theme';

package/dist/esm/types/theme/components/badge.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    baseStyle: {
+        borderRadius: string;
+        fontWeight: string;
+        paddingX: number;
+    };
+};
+export default _default;

package/dist/esm/types/theme/components/button.d.ts

@@ -0,0 +1,141 @@
+declare const _default: {
+    baseStyle: {
+        borderRadius: string;
+        fontWeight: string;
+    };
+    variants: {
+        '@primary': (props: any) => {
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+            _hover: {
+                bg: string;
+                color: string;
+                _disabled: {
+                    bg: string;
+                };
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        '@secondary': (props: any) => {
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+            _hover: {
+                bg: string;
+                color: string;
+                _disabled: {
+                    bg: string;
+                };
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        '@danger': (props: any) => {
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+            _hover: {
+                bg: string;
+                color: string;
+                _disabled: {
+                    bg: string;
+                };
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        '@link': (props: any) => {
+            height: string;
+            margin: number;
+            padding: number;
+            _hover: {
+                textDecoration: string;
+                color: string;
+            };
+            _active: {
+                textDecoration: string;
+                color: string;
+            };
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+        };
+        '@linkNeutral': (props: any) => {
+            height: string;
+            margin: number;
+            padding: number;
+            _hover: {
+                textDecoration: string;
+                color: string;
+            };
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        '@white': (props: any) => {
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+            _hover: {
+                bg: string;
+                color: string;
+                _disabled: {
+                    bg: string;
+                };
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        '@whiteNeutral': (props: any) => {
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+            _hover: {
+                bg: string;
+                color: string;
+                _disabled: {
+                    bg: string;
+                };
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        ghost: (props: any) => {
+            bg: string;
+            _hover: {
+                bg: string;
+            };
+        };
+    };
+};
+export default _default;

package/dist/esm/types/theme/components/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Badge } from './badge';
+export { default as Button } from './button';
+export { default as Input } from './input';
+export { default as Tag } from './tag';

package/dist/esm/types/theme/components/input.d.ts

@@ -0,0 +1,48 @@
+declare const _default: {
+    baseStyle: {
+        field: {
+            borderRadius: string;
+        };
+    };
+    variants: {
+        outline: (props: any) => {
+            field: {
+                bg: string;
+                borderColor: string;
+                borderRadius: string;
+                _focus: {
+                    borderColor: string;
+                };
+                _focusVisible: {
+                    boxShadow: string;
+                };
+            };
+            addon: {
+                borderRadius: string;
+            };
+        };
+        filled: (props: any) => {
+            field: {
+                bg: string;
+                borderWidth: string;
+                borderColor: string;
+                borderRadius: string;
+                _hover: {
+                    bg: string;
+                    borderColor: string;
+                };
+                _focus: {
+                    bg: string;
+                    borderColor: string;
+                };
+                _focusVisible: {
+                    boxShadow: string;
+                };
+            };
+            addon: {
+                borderRadius: string;
+            };
+        };
+    };
+};
+export default _default;

package/dist/esm/types/theme/components/tag.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    baseStyle: {
+        container: {
+            borderRadius: string;
+            fontWeight: string;
+        };
+    };
+};
+export default _default;

package/dist/esm/types/theme/foundations/colors.d.ts

@@ -0,0 +1,65 @@
+export declare const colors: {
+    brand: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    orange: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    gradients: {
+        primary: string;
+    };
+};

package/dist/esm/types/theme/foundations/index.d.ts

@@ -0,0 +1,86 @@
+declare const foundations: {
+    shadows: {
+        xs: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        layout: string;
+    };
+    fonts: {
+        heading: string;
+        body: string;
+        mono: string;
+    };
+    fontSizes: {
+        '2xs': string;
+    };
+    colors: {
+        brand: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        gray: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        red: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        orange: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        green: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        gradients: {
+            primary: string;
+        };
+    };
+};
+export default foundations;

package/dist/esm/types/theme/foundations/shadows.d.ts

@@ -0,0 +1,10 @@
+export declare const shadows: {
+    xs: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    layout: string;
+};

package/dist/esm/types/theme/foundations/typography.d.ts

@@ -0,0 +1,10 @@
+export declare const typography: {
+    fonts: {
+        heading: string;
+        body: string;
+        mono: string;
+    };
+    fontSizes: {
+        '2xs': string;
+    };
+};

package/dist/esm/types/theme/index.d.ts

@@ -0,0 +1 @@
+export * from './theme';

package/dist/esm/types/theme/theme.d.ts

@@ -0,0 +1 @@
+export declare const theme: any;