@paygreen/pgui 2.14.10 → 3.0.1-beta

package/dist/components/input-phone/input-phone.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Props for the InputPhone component
+ */
+export interface InputPhoneProps {
+    /** The locale to use for translations ('fr' or 'en') */
+    locale?: 'fr' | 'en';
+    /** The phone number value in E.164 format */
+    value?: string;
+    /** The label to display above the input */
+    label?: string;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    isDisabled?: boolean;
+    /** Additional props to pass to the input element */
+    inputProps?: Record<string, unknown>;
+    /** Callback fired when the phone number changes */
+    onChange?: (value: string) => void;
+    /** Whether the input is required */
+    isRequired?: boolean;
+    /** Whether the input is invalid */
+    isInvalid?: boolean;
+    /** Error message to display when invalid */
+    errorMessage?: string;
+    /** Custom labels for the country search component */
+    searchLabels?: {
+        /** Placeholder text for the search input */
+        search?: string;
+        /** Text shown when no results are found */
+        noResults?: string;
+        /** Text shown while loading */
+        loading?: string;
+    };
+}
+/**
+ * Validates if a phone number is valid
+ */
+declare const isValidPhone: (val: string) => boolean;
+/**
+ * Formats a phone number to international format
+ */
+declare const formatPhoneIntl: (val: string) => string;
+/**
+ * A reusable phone input component with international formatting and country selection
+ *
+ * Note: This component does NOT use forwardRef intentionally, as react-phone-number-input
+ * manages its own ref system for proper focus management and country selection.
+ *
+ * @example
+ * ```tsx
+ * <InputPhone
+ *   value="+33612345678"
+ *   onChange={setPhoneNumber}
+ *   isRequired
+ * />
+ * ```
+ */
+declare const InputPhone: {
+    ({ locale, label, value, placeholder, isDisabled, inputProps, onChange, isRequired, isInvalid, errorMessage, searchLabels, ...props }: InputPhoneProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { formatPhoneIntl, InputPhone, isValidPhone };

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/input-search/input-search.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { InputProps } from '@chakra-ui/react';
+type CustomProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?(value?: string): void;
+    delay?: number;
+    clearLabel?: string;
+    inputProps?: object;
+    isDisabled?: boolean;
+    customEndElement?: React.ReactNode;
+};
+export declare const InputSearch: React.ForwardRefExoticComponent<Omit<InputProps, keyof CustomProps> & CustomProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,25 @@
+import { SpinnerProps } from '@chakra-ui/react';
+/**
+ * Props for the Loader component
+ */
+export interface LoaderProps extends SpinnerProps {
+    /** Whether the loader should be visible and spinning */
+    loading?: 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  size="lg" loading={false} />
+ * ```
+ */
+declare const Loader: {
+    ({ loading, size, color, ...rest }: LoaderProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { Loader };

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

@@ -0,0 +1,25 @@
+/**
+ * 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: ({ color, width, height, ...rest }: LogoPayGreenByLemonwayProps) => import("react/jsx-runtime").JSX.Element;
+export { LogoPayGreenByLemonway };

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

@@ -0,0 +1,79 @@
+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: (open: boolean) => 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.Root open={isOpen} setOpen={setIsOpen}>
+ *   <Modal.Trigger asChild>
+ *     <Button>Open Modal</Button>
+ *   </Modal.Trigger>
+ *   <Modal.Content>
+ *      <Modal.Header>Title</Modal.Header>
+ *      <Modal.Body>Content goes here</Modal.Body>
+ *      <Modal.Footer>
+ *        <Modal.ActionTrigger asChild>
+ *          <Button onClick={() => setIsOpen(false)}>Close</Button>
+ *        </Modal.ActionTrigger>
+ *      </Modal.Footer>
+ *   </Modal.Content>
+ * </Modal.Root>
+ * ```
+ */
+declare const ModalRoot: {
+    ({ open, setOpen, children, ...rest }: ModalPropsWithExtensions): import("react/jsx-runtime").JSX.Element;
+    Trigger({ children, ...rest }: {
+        children: ReactNode;
+        [key: string]: any;
+    }): import("react/jsx-runtime").JSX.Element;
+    Header({ children, ...rest }: {
+        children: ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    Body({ children, ...rest }: {
+        children: ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    Footer({ children, ...rest }: {
+        children: ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    ActionTrigger({ children, ...rest }: {
+        children: ReactNode;
+        [key: string]: any;
+    }): import("react/jsx-runtime").JSX.Element;
+    Backdrop(props: any): import("react/jsx-runtime").JSX.Element;
+    Positioner(props: any): import("react/jsx-runtime").JSX.Element;
+    Portal({ children, ...rest }: {
+        children: ReactNode;
+        [key: string]: any;
+    }): import("react/jsx-runtime").JSX.Element;
+    ContentWrapper({ children, ...rest }: {
+        children: ReactNode;
+        [key: string]: any;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const Modal: typeof ModalRoot & {
+    Root: typeof ModalRoot;
+    Trigger: typeof ModalRoot.Trigger;
+    Header: typeof ModalRoot.Header;
+    Body: typeof ModalRoot.Body;
+    Footer: typeof ModalRoot.Footer;
+    Backdrop: typeof ModalRoot.Backdrop;
+    Positioner: typeof ModalRoot.Positioner;
+    ContentWrapper: typeof ModalRoot.ContentWrapper;
+    ActionTrigger: typeof ModalRoot.ActionTrigger;
+    Portal: typeof ModalRoot.Portal;
+};
+export { Modal };

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

@@ -0,0 +1,36 @@
+import { ColorPalette } from '@chakra-ui/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;
+    /** Color palette for the pagination */
+    colorPalette?: ColorPalette;
+}
+/**
+ * Pagination component for navigating through paginated data
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   page={currentPage}
+ *   setPage={setCurrentPage}
+ *   pageSize={10}
+ *   totalItems={250}
+ * />
+ * ```
+ */
+declare const Pagination: {
+    ({ page, setPage, pageSize, totalItems, isLoadingPage, colorPalette, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Pagination };

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

@@ -0,0 +1,49 @@
+import { ActionMeta, MultiValue, Props as ReactSelectProps, SingleValue } 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<SelectOptionType, boolean>, 'options' | 'isMulti' | 'onChange' | 'value'> {
+    /** 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;
+    /** Function to load options asynchronously */
+    loadOptions?: (inputValue: string) => Promise<SelectOptionType[]>;
+    /** Current value for controlled component */
+    value?: SingleValue<SelectOptionType> | MultiValue<SelectOptionType> | null;
+    /** onChange handler for controlled component */
+    onChange?: (value: SingleValue<SelectOptionType> | MultiValue<SelectOptionType> | null, actionMeta: ActionMeta<SelectOptionType>) => void;
+    /** Name attribute for form integration */
+    name?: string;
+    /** Whether the select is in invalid state */
+    invalid?: boolean;
+}
+/**
+ * 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: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<any>>;
+export { Select };

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

@@ -0,0 +1,117 @@
+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 */
+    hidden?: 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;
+    /** Link to navigate to when the item is clicked */
+    link?: string;
+}
+/**
+ * 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[];
+    /** Whether the section is hidden */
+    hidden?: boolean;
+    /** Optional icon to display next to the section title */
+    icon?: React.ElementType;
+}
+/**
+ * Props for the sidebar body component that contains navigation sections
+ */
+interface SidebarBodyProps {
+    navSections: NavSectionProps[] | null;
+}
+/**
+ * Props for the sidebar root component
+ */
+interface SidebarRootProps extends SidebarProps {
+    pathname: string;
+    navItemsAs?: React.ElementType;
+    navItemsProps?: (item: NavItemProps) => Record<string, any>;
+}
+/**
+ * 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;
+    /** Path to the active item */
+    activePath?: string;
+    /** 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;
+    Root: ({ pathname, navItemsAs, navItemsProps, ...props }: SidebarRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Sidebar };

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,11 @@
+import { Tooltip as ChakraTooltip } from '@chakra-ui/react';
+import * as React from 'react';
+export interface TooltipProps extends ChakraTooltip.RootProps {
+    showArrow?: boolean;
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+    content: React.ReactNode;
+    contentProps?: ChakraTooltip.ContentProps;
+    disabled?: boolean;
+}
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;

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/components/ui/toaster.d.ts

@@ -0,0 +1,2 @@
+export declare const toaster: import('@zag-js/toast').Store<any>;
+export declare const Toaster: () => import("react/jsx-runtime").JSX.Element;

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;
+};