@paygreen/pgui 3.0.0-beta → 3.0.0

package/README.md

@@ -81,6 +81,9 @@ npm install -g yalc
 #### 2. In this library (pgui/)
 
 ```bash
+# Generate types if necessary 
+npx @chakra-ui/cli typegen ./src/theme/index.ts
+
 # Build and publish to local store
 npm run build
 yalc publish

package/dist/components/actions-button/actions-button.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { IconButtonProps } from '@chakra-ui/react';
 /**
  * Props for the ActionsButton component
@@ -6,7 +7,7 @@ export interface ActionsButtonProps extends Omit<IconButtonProps, 'aria-label' |
     /** Accessible label for the action button (used for aria-label) */
     label: string;
     /** Optional custom icon to display instead of the default three dots */
-    icon?: React.ReactElement;
+    icon?: ReactElement;
 }
 /**
  * ActionsButton component - A semantic action button for triggering contextual menus

package/dist/components/data-list/datalist.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { AccordionItemProps, AccordionRootProps, FlexProps } from '@chakra-ui/react';
 /**
  * Record mapping column names to their configuration properties
@@ -68,7 +67,7 @@ interface DataListProps extends AccordionRootProps {
  */
 declare const DataList: {
     ({ multiple, collapsible, isHover, ...rest }: DataListProps): import("react/jsx-runtime").JSX.Element;
-    Cell: React.NamedExoticComponent<DataListCellProps>;
+    Cell: import('react').NamedExoticComponent<DataListCellProps>;
     Row({ isVisible, isDisabled, ...rest }: DataListRowProps): import("react/jsx-runtime").JSX.Element;
     Header({ ...rest }: DataListHeaderProps): import("react/jsx-runtime").JSX.Element;
     Footer({ ...rest }: DataListFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/data-table.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { ReactNode } from 'react';
 import { ColumnDef, ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { PaginationProps } from '../pagination/pagination';
 /**
@@ -25,7 +25,7 @@ export interface DataTableProps<TData> {
     /** Enable column sorting functionality */
     enableSorting?: boolean;
     /** Content to display when no data is available */
-    emptyState?: React.ReactNode;
+    emptyState?: ReactNode;
     /** Enable responsive behavior (mobile cards view) */
     responsive?: boolean;
     /** Mobile view mode when responsive is enabled */

package/dist/components/date-picker/date-picker.d.ts

@@ -1,4 +1,3 @@
-import { Locale } from 'date-fns';
 /**
  * Props for the DatePicker component
  */
@@ -15,8 +14,8 @@ export interface DatePickerProps {
     isDateTime?: boolean;
     /** Placeholder text for the input */
     placeholderText?: string;
-    /** Locale for date formatting and translations */
-    locale?: Locale;
+    /** Locale string for date formatting and translations ('en', 'fr', 'en-gb') */
+    locale?: 'en' | 'fr';
     /** Minimum selectable date */
     minDate?: Date;
     /** Maximum selectable date */

package/dist/components/index.d.ts

@@ -4,7 +4,9 @@ export * from './data-table/data-table';
 export * from './date-picker/date-picker';
 export * from './field-wrapper/field-wrapper';
 export * from './input-mask/input-mask';
+export * from './input-password/input-password';
 export * from './input-phone/input-phone';
+export * from './input-search/input-search';
 export * from './input/input';
 export * from './loader/loader';
 export * from './logos/logoPaygreenByLemonway';
@@ -12,4 +14,6 @@ export * from './modal/modal';
 export * from './pagination/pagination';
 export * from './select/select';
 export * from './sidebar/sidebar';
+export * from './tooltip/tooltip';
 export * from './ui/color-mode';
+export * from './ui/toaster';

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

@@ -1,3 +1,4 @@
+import { ChangeEvent } from 'react';
 import { InputProps } from '../input/input';
 /**
  * Props for the InputMask component
@@ -8,7 +9,7 @@ export interface InputMaskProps extends Omit<InputProps, 'onChange'> {
     /** Additional options for the mask behavior */
     maskOptions?: any;
     /** Callback fired when the input value changes */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 /**
  * A reusable input component that extends the base Input with mask functionality

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

@@ -0,0 +1,34 @@
+import { GroupProps, InputProps, StackProps } from '@chakra-ui/react';
+import * as React from 'react';
+interface PasswordStrengthMeterProps extends StackProps {
+    max?: number;
+    value: number;
+}
+declare const PasswordStrengthMeter: React.ForwardRefExoticComponent<PasswordStrengthMeterProps & React.RefAttributes<HTMLDivElement>>;
+export interface PasswordVisibilityProps {
+    /**
+     * The default visibility state of the password input.
+     */
+    defaultVisible?: boolean;
+    /**
+     * The controlled visibility state of the password input.
+     */
+    visible?: boolean;
+    /**
+     * Callback invoked when the visibility state changes.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Custom icons for the visibility toggle button.
+     */
+    visibilityIcon?: {
+        on: React.ReactNode;
+        off: React.ReactNode;
+    };
+}
+export interface InputPasswordProps extends InputProps, PasswordVisibilityProps {
+    rootProps?: GroupProps;
+    label?: string;
+}
+declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProps & React.RefAttributes<HTMLInputElement>>;
+export { InputPassword, PasswordStrengthMeter };

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

@@ -11,7 +11,7 @@ export interface InputPhoneProps {
     /** Placeholder text for the input */
     placeholder?: string;
     /** Whether the input is disabled */
-    isDisabled?: boolean;
+    disabled?: boolean;
     /** Additional props to pass to the input element */
     inputProps?: Record<string, unknown>;
     /** Callback fired when the phone number changes */
@@ -19,7 +19,7 @@ export interface InputPhoneProps {
     /** Whether the input is required */
     isRequired?: boolean;
     /** Whether the input is invalid */
-    isInvalid?: boolean;
+    invalid?: boolean;
     /** Error message to display when invalid */
     errorMessage?: string;
     /** Custom labels for the country search component */
@@ -56,7 +56,7 @@ declare const formatPhoneIntl: (val: string) => string;
  * ```
  */
 declare const InputPhone: {
-    ({ locale, label, value, placeholder, isDisabled, inputProps, onChange, isRequired, isInvalid, errorMessage, searchLabels, ...props }: InputPhoneProps): import("react/jsx-runtime").JSX.Element;
+    ({ locale, label, value, placeholder, disabled, inputProps, onChange, isRequired, invalid, errorMessage, searchLabels, ...props }: InputPhoneProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { formatPhoneIntl, InputPhone, isValidPhone };

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

@@ -1,11 +1,10 @@
-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;
+    loading?: boolean;
     /** Size of the spinner */
     size?: 'sm' | 'md' | 'lg' | 'xl';
     /** Custom color for the spinner (overrides theme colors) */
@@ -16,8 +15,11 @@ export interface LoaderProps extends SpinnerProps {
  *
  * @example
  * ```tsx
- * <Loader isLoading={true} size="lg" />
+ * <Loader  size="lg" loading={false} />
  * ```
  */
-declare const Loader: React.FC<LoaderProps>;
+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

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 /**
  * Props for the LogoPayGreenByLemonway component
  */
@@ -22,5 +21,5 @@ export interface LogoPayGreenByLemonwayProps {
  * />
  * ```
  */
-declare const LogoPayGreenByLemonway: FC<LogoPayGreenByLemonwayProps>;
+declare const LogoPayGreenByLemonway: ({ color, width, height, ...rest }: LogoPayGreenByLemonwayProps) => import("react/jsx-runtime").JSX.Element;
 export { LogoPayGreenByLemonway };

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

@@ -7,7 +7,7 @@ export interface ModalProps {
     /** Whether the modal is open or closed */
     open: boolean;
     /** Function to control the modal open/closed state */
-    setOpen: (value: any) => void;
+    setOpen: (open: boolean) => void;
     /** Content to be rendered inside the modal */
     children: ReactNode;
 }
@@ -17,26 +17,63 @@ export type ModalPropsWithExtensions = ModalProps & Partial<DrawerRootProps> & P
  *
  * @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>
+ * <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 Modal: {
+declare const ModalRoot: {
     ({ open, setOpen, children, ...rest }: ModalPropsWithExtensions): import("react/jsx-runtime").JSX.Element;
-    Header({ children }: {
+    Trigger({ children, ...rest }: {
         children: ReactNode;
+        [key: string]: any;
     }): import("react/jsx-runtime").JSX.Element;
-    Body({ children }: {
+    Header({ children, ...rest }: {
         children: ReactNode;
     }): import("react/jsx-runtime").JSX.Element;
-    Footer({ children }: {
+    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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { ColorPalette } from '@chakra-ui/react';
 /**
  * Props for the Pagination component
  */
@@ -13,6 +13,8 @@ export interface PaginationProps {
     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
@@ -27,5 +29,8 @@ export interface PaginationProps {
  * />
  * ```
  */
-declare const Pagination: React.FC<PaginationProps>;
+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

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-import { Props as ReactSelectProps } from 'react-select';
+import { ActionMeta, MultiValue, Props as ReactSelectProps, SingleValue } from 'react-select';
 /**
  * Option interface for Select component
  */
@@ -12,33 +11,54 @@ export interface SelectOptionType {
     isDisabled?: boolean;
 }
 /**
- * Props for Select component extending react-select props
+ * Props for single-select mode
  */
-export interface SelectProps extends Omit<ReactSelectProps, 'options' | 'isMulti'> {
+export interface SingleSelectProps extends Omit<ReactSelectProps<SelectOptionType, false>, 'options' | 'isMulti' | 'onChange' | 'value'> {
     /** Array of options to display */
     options?: SelectOptionType[];
-    /** Enable multi-selection */
-    isMulti?: boolean;
+    /** Enable multi-selection - must be false or undefined */
+    isMulti?: false;
+    /** Current value for controlled component */
+    value?: SingleValue<SelectOptionType> | null;
+    /** onChange handler for controlled component */
+    onChange?: (value: SingleValue<SelectOptionType> | null, actionMeta: ActionMeta<SelectOptionType>) => void;
     /** 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[]>;
+    /** 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
- * />
- * ```
+ * Props for multi-select mode
  */
-declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<any>>;
+export interface MultiSelectProps extends Omit<ReactSelectProps<SelectOptionType, true>, 'options' | 'isMulti' | 'onChange' | 'value'> {
+    /** Array of options to display */
+    options?: SelectOptionType[];
+    /** Enable multi-selection - must be true */
+    isMulti: true;
+    /** Current value for controlled component - never null in multi mode, always an array */
+    value?: MultiValue<SelectOptionType>;
+    /** onChange handler for controlled component - never receives null in multi mode */
+    onChange?: (value: MultiValue<SelectOptionType>, actionMeta: ActionMeta<SelectOptionType>) => void;
+    /** Enable async loading of options */
+    isAsync?: boolean;
+    /** Enable creating new options */
+    isCreatable?: boolean;
+    /** Function to load options asynchronously */
+    loadOptions?: (inputValue: string) => Promise<SelectOptionType[]>;
+    /** Name attribute for form integration */
+    name?: string;
+    /** Whether the select is in invalid state */
+    invalid?: boolean;
+}
+/**
+ * Union type for Select component props
+ */
+export type SelectProps = SingleSelectProps | MultiSelectProps;
+declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<any>>;
 export { Select };

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

@@ -26,7 +26,7 @@ interface NavItemProps {
     /** Text label for the navigation item */
     label: string;
     /** Whether the navigation item is currently active/selected */
-    active?: boolean;
+    hidden?: boolean;
     /** Whether the item has a submenu (shows chevron down icon) */
     hasSubmenu?: boolean;
     /** Number to display in a badge (for notifications or counts) */
@@ -39,6 +39,8 @@ interface NavItemProps {
     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
@@ -48,6 +50,8 @@ interface NavSectionProps {
     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;
 }
@@ -55,8 +59,15 @@ interface NavSectionProps {
  * Props for the sidebar body component that contains navigation sections
  */
 interface SidebarBodyProps {
-    /** Array of navigation sections to render in the sidebar body */
-    navSections: NavSectionProps[];
+    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
@@ -70,6 +81,8 @@ export interface SidebarProps extends Omit<DrawerRootProps, 'open'> {
     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 */
@@ -99,5 +112,6 @@ declare const Sidebar: {
     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/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/index.d.ts

@@ -1,2 +1,2 @@
 export * from './components';
-export * from './theme';
+export { default as PGUISystemContext } from './theme';