@paygreen/pgui 2.14.10 → 3.0.0-beta

package/dist/components/input-phone/partials/search-on-list.d.ts

@@ -0,0 +1,61 @@
+import { ComponentType } from 'react';
+/**
+ * Represents a selectable option in the search list
+ */
+export interface SearchOption {
+    /** Display text for the option */
+    label: string;
+    /** Unique value identifier for the option */
+    value: string;
+}
+/**
+ * Props for the SearchOnList component
+ */
+export interface SearchOnListProps {
+    /** Array of options to display and search through */
+    options: SearchOption[];
+    /** Callback fired when an option is selected */
+    onChange: (value: string) => void;
+    /** Component to render icons for each option (typically country flags) */
+    iconComponent: ComponentType<{
+        country: string;
+        label: string;
+        [key: string]: any;
+    }>;
+    /** Locale for default labels and formatting */
+    locale?: 'fr' | 'en';
+    /** Currently selected value */
+    value?: string;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    /** Maximum height of the dropdown list */
+    maxHeight?: string;
+    /** Maximum width of the dropdown container */
+    maxWidth?: string;
+    /** Custom labels to override default translations */
+    labels?: {
+        /** Label for the search input placeholder */
+        search?: string;
+        /** Message shown when no results are found */
+        noResults?: string;
+        /** Message shown during search loading */
+        loading?: string;
+    };
+}
+/**
+ * SearchOnList component - A searchable dropdown list with keyboard navigation
+ *
+ * @example
+ * ```tsx
+ * <SearchOnList
+ *   options={countries}
+ *   onChange={setSelectedCountry}
+ *   iconComponent={CountryFlag}
+ *   locale="fr"
+ * />
+ * ```
+ */
+declare const SearchOnList: ({ options, onChange, iconComponent: IconComponent, locale, labels: customLabels, ...props }: SearchOnListProps) => import("react/jsx-runtime").JSX.Element;
+export { SearchOnList };

package/dist/components/loader/loader.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { SpinnerProps } from '@chakra-ui/react';
+/**
+ * Props for the Loader component
+ */
+export interface LoaderProps extends SpinnerProps {
+    /** Whether the loader should be visible and spinning */
+    isLoading?: boolean;
+    /** Size of the spinner */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Custom color for the spinner (overrides theme colors) */
+    color?: string;
+}
+/**
+ * Loader component - A reusable loading spinner with theme-aware styling
+ *
+ * @example
+ * ```tsx
+ * <Loader isLoading={true} size="lg" />
+ * ```
+ */
+declare const Loader: React.FC<LoaderProps>;
+export { Loader };

package/dist/components/logos/logoPaygreenByLemonway.d.ts

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+/**
+ * Props for the LogoPayGreenByLemonway component
+ */
+export interface LogoPayGreenByLemonwayProps {
+    /** Color of the logo - accepts any valid CSS color value or CSS variable */
+    color?: string;
+    /** Width of the logo - accepts CSS units as string or number (pixels) */
+    width?: string | number;
+    /** Height of the logo - accepts CSS units as string or number (pixels) */
+    height?: string | number;
+}
+/**
+ * PayGreen by LemonWay logo component
+ *
+ * @example
+ * ```tsx
+ * <LogoPayGreenByLemonway
+ *   color="#00B956"
+ *   width={200}
+ *   height={80}
+ * />
+ * ```
+ */
+declare const LogoPayGreenByLemonway: FC<LogoPayGreenByLemonwayProps>;
+export { LogoPayGreenByLemonway };

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { DialogRootProps, DrawerRootProps } from '@chakra-ui/react';
+/**
+ * Props for the Modal component
+ */
+export interface ModalProps {
+    /** Whether the modal is open or closed */
+    open: boolean;
+    /** Function to control the modal open/closed state */
+    setOpen: (value: any) => void;
+    /** Content to be rendered inside the modal */
+    children: ReactNode;
+}
+export type ModalPropsWithExtensions = ModalProps & Partial<DrawerRootProps> & Partial<DialogRootProps>;
+/**
+ * Responsive Modal component that adapts to screen size
+ *
+ * @example
+ * ```tsx
+ * <Modal open={isOpen} setOpen={setIsOpen}>
+ *   <Modal.Header>Title</Modal.Header>
+ *   <Modal.Body>Content goes here</Modal.Body>
+ *   <Modal.Footer>
+ *     <Button onClick={() => setIsOpen(false)}>Close</Button>
+ *   </Modal.Footer>
+ * </Modal>
+ * ```
+ */
+declare const Modal: {
+    ({ open, setOpen, children, ...rest }: ModalPropsWithExtensions): import("react/jsx-runtime").JSX.Element;
+    Header({ children }: {
+        children: ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    Body({ children }: {
+        children: ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    Footer({ children }: {
+        children: ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Modal };

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+/**
+ * Props for the Pagination component
+ */
+export interface PaginationProps {
+    /** Current active page number (1-based) */
+    page: number;
+    /** Function to update the current page */
+    setPage: (page: number) => void;
+    /** Number of items displayed per page */
+    pageSize: number;
+    /** Total number of items across all pages */
+    totalItems: number;
+    /** Whether a page is currently loading - disables all interactions when true */
+    isLoadingPage?: boolean;
+}
+/**
+ * Pagination component for navigating through paginated data
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   page={currentPage}
+ *   setPage={setCurrentPage}
+ *   pageSize={10}
+ *   totalItems={250}
+ * />
+ * ```
+ */
+declare const Pagination: React.FC<PaginationProps>;
+export { Pagination };

package/dist/components/select/select.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+import { Props as ReactSelectProps } from 'react-select';
+/**
+ * Option interface for Select component
+ */
+export interface SelectOptionType {
+    /** The value of the option */
+    value: string;
+    /** The label displayed for the option */
+    label: string;
+    /** Whether the option is disabled */
+    isDisabled?: boolean;
+}
+/**
+ * Props for Select component extending react-select props
+ */
+export interface SelectProps extends Omit<ReactSelectProps, 'options' | 'isMulti'> {
+    /** Array of options to display */
+    options?: SelectOptionType[];
+    /** Enable multi-selection */
+    isMulti?: boolean;
+    /** Enable async loading of options */
+    isAsync?: boolean;
+    /** Enable creating new options */
+    isCreatable?: boolean;
+    /** Custom test ID for testing */
+    'data-testid'?: string;
+    /** Function to load options asynchronously */
+    loadOptions?: (inputValue: string) => Promise<SelectOptionType[]>;
+}
+/**
+ * A flexible Select component built on react-select
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   options={[{value: 'option1', label: 'Option 1'}]}
+ *   placeholder="Choose an option..."
+ *   isClearable
+ * />
+ * ```
+ */
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<any>>;
+export { Select };

package/dist/components/sidebar/sidebar.d.ts

@@ -0,0 +1,103 @@
+import { ReactNode, RefObject } from 'react';
+import { BoxProps, DrawerRootProps } from '@chakra-ui/react';
+/**
+ * Theme configuration for sidebar styling
+ */
+interface SidebarTheme {
+    /** Width of the sidebar in desktop mode */
+    width?: string;
+    /** Background color */
+    backgroundColor?: string;
+    /** Border color */
+    borderColor?: string;
+    /** Box shadow */
+    boxShadow?: string;
+    /** Z-index value */
+    zIndex?: number;
+    /** Transition duration for animations */
+    transitionDuration?: string;
+}
+/**
+ * Props for individual navigation items in the sidebar
+ */
+interface NavItemProps {
+    /** Icon component to display before the label */
+    icon?: React.ElementType;
+    /** Text label for the navigation item */
+    label: string;
+    /** Whether the navigation item is currently active/selected */
+    active?: boolean;
+    /** Whether the item has a submenu (shows chevron down icon) */
+    hasSubmenu?: boolean;
+    /** Number to display in a badge (for notifications or counts) */
+    badge?: number;
+    /** Whether this is a sub-item (applies additional left padding) */
+    isSubItem?: boolean;
+    /** Child elements to render inside the navigation item */
+    children?: ReactNode;
+    /** Callback function when the navigation item is clicked */
+    onClick?: () => void;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+}
+/**
+ * Props for navigation sections that group related navigation items
+ */
+interface NavSectionProps {
+    /** Optional title for the navigation section */
+    title?: string;
+    /** Array of navigation items to display in this section */
+    items: NavItemProps[];
+    /** Optional icon to display next to the section title */
+    icon?: React.ElementType;
+}
+/**
+ * Props for the sidebar body component that contains navigation sections
+ */
+interface SidebarBodyProps {
+    /** Array of navigation sections to render in the sidebar body */
+    navSections: NavSectionProps[];
+}
+/**
+ * Main props for the Sidebar component
+ */
+export interface SidebarProps extends Omit<DrawerRootProps, 'open'> {
+    /** Custom breakpoint configuration for responsive behavior */
+    breakpoints?: any[] | Partial<Record<string, any>>;
+    /** Whether the sidebar is currently open/visible */
+    open: boolean;
+    /** Function to control the sidebar open/close state */
+    setOpen: (val: boolean) => void;
+    /** Reference to the container element where the drawer portal should be rendered */
+    containerRef: RefObject<HTMLElement | null> | undefined;
+    /** Child components (Header, Body, Footer) to render inside the sidebar */
+    children: ReactNode;
+    /** Custom theme configuration for styling */
+    theme?: SidebarTheme;
+}
+/**
+ * Sidebar component - A responsive sidebar with navigation sections
+ *
+ * @example
+ * ```tsx
+ * <Sidebar open={isOpen} setOpen={setIsOpen} containerRef={containerRef}>
+ *   <Sidebar.Header>
+ *     <Logo />
+ *   </Sidebar.Header>
+ *   <Sidebar.Body navSections={navigationSections} />
+ * </Sidebar>
+ * ```
+ */
+declare const Sidebar: {
+    ({ breakpoints, open, setOpen, containerRef, children, theme, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+    NavItem: import('react').NamedExoticComponent<NavItemProps>;
+    NavSection: import('react').NamedExoticComponent<NavSectionProps>;
+    Body: import('react').NamedExoticComponent<SidebarBodyProps>;
+    Header({ children, ...props }: {
+        children: ReactNode;
+    } & Partial<BoxProps>): import("react/jsx-runtime").JSX.Element;
+    Footer({ children, ...props }: {
+        children: ReactNode;
+    } & Partial<BoxProps>): import("react/jsx-runtime").JSX.Element;
+};
+export { Sidebar };

package/dist/components/ui/color-mode.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { IconButtonProps, SpanProps } from '@chakra-ui/react';
+import { ThemeProviderProps } from 'next-themes';
+export interface ColorModeProviderProps extends ThemeProviderProps {
+}
+export declare function ColorModeProvider(props: ColorModeProviderProps): import("react/jsx-runtime").JSX.Element;
+export type ColorMode = 'light' | 'dark';
+export interface UseColorModeReturn {
+    colorMode: ColorMode;
+    setColorMode: (colorMode: ColorMode) => void;
+    toggleColorMode: () => void;
+}
+export declare function useColorMode(): UseColorModeReturn;
+export declare function useColorModeValue<T>(light: T, dark: T): T;
+export declare function ColorModeIcon(): import("react/jsx-runtime").JSX.Element;
+interface ColorModeButtonProps extends Omit<IconButtonProps, 'aria-label'> {
+}
+export declare const ColorModeButton: React.ForwardRefExoticComponent<ColorModeButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const LightMode: React.ForwardRefExoticComponent<SpanProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const DarkMode: React.ForwardRefExoticComponent<SpanProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/hooks/scroll-shadow.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface ScrollShadowProps {
+    children: ReactNode;
+    [key: string]: any;
+}
+export declare function ScrollShadow({ children, ...props }: ScrollShadowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/hooks/use-data-table.d.ts

@@ -0,0 +1,12 @@
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { DataTableProps } from '../components';
+/**
+ * Custom hook for managing DataTable state and configuration
+ */
+export declare function useDataTable<TData>({ data, columns, pagination, enableFiltering, enableSorting, onFilterChange, onSortingChange, }: Pick<DataTableProps<TData>, 'data' | 'columns' | 'pagination' | 'enableFiltering' | 'enableSorting' | 'onFilterChange' | 'onSortingChange'>): {
+    table: import('@tanstack/table-core').Table<TData>;
+    columnFilters: ColumnFiltersState;
+    sorting: SortingState;
+    pageCount: number | undefined;
+    validatedPagination: import('../components').DataTablePagination | null;
+};