@paygreen/pgui 3.0.1-beta → 3.0.2

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

@@ -1,8 +1,11 @@
-import { Locale } from 'date-fns';
 /**
  * Props for the DatePicker component
  */
 export interface DatePickerProps {
+    /** ID attribute for the input element */
+    id?: string;
+    /** Name attribute for form integration */
+    name?: string;
     /** The selected date or date range */
     value?: Date | [Date | null, Date | null] | null;
     /** Label text displayed above the input */
@@ -13,10 +16,10 @@ export interface DatePickerProps {
     isRange?: boolean;
     /** Whether to enable time selection */
     isDateTime?: boolean;
-    /** Placeholder text for the input */
-    placeholderText?: string;
-    /** Locale for date formatting and translations */
-    locale?: Locale;
+    /** Custom placeholder text for the input (overrides default format placeholder) */
+    placeholder?: string;
+    /** Locale string for date formatting and translations ('en', 'fr') */
+    locale?: 'en' | 'fr';
     /** Minimum selectable date */
     minDate?: Date;
     /** Maximum selectable date */
@@ -26,18 +29,56 @@ export interface DatePickerProps {
     /** Callback fired when the input loses focus */
     onBlur?: () => void;
     /** Whether the input is disabled */
-    isDisabled?: boolean;
+    disabled?: boolean;
+    /** Whether to show a clear button when there's a value (default: true) */
+    clearable?: boolean;
+    /** Whether the input is in invalid state */
+    invalid?: boolean;
 }
 /**
  * A reusable date picker component with floating label and range selection support
  *
  * @example
  * ```tsx
+ * // Default behavior - shows format as placeholder (mm/dd/yyyy)
  * <DatePicker
  *   label="Birthdate"
  *   value={date}
  *   onChange={setDate}
  * />
+ *
+ * // French locale - shows French format (jj/mm/aaaa)
+ * <DatePicker
+ *   label="Date de naissance"
+ *   value={date}
+ *   onChange={setDate}
+ *   locale="fr"
+ * />
+ *
+ * // With custom placeholder (overrides default format)
+ * <DatePicker
+ *   label="Birthdate"
+ *   value={date}
+ *   onChange={setDate}
+ *   placeholderText="Choose your birthdate"
+ * />
+ *
+ * // To disable the clear button:
+ * <DatePicker
+ *   label="Birthdate"
+ *   value={date}
+ *   onChange={setDate}
+ *   clearable={false}
+ * />
+ *
+ * // With name and id for form integration:
+ * <DatePicker
+ *   id="birthdate-input"
+ *   name="birthdate"
+ *   label="Birthdate"
+ *   value={date}
+ *   onChange={setDate}
+ * />
  * ```
  */
 declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/field-wrapper/field-wrapper.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 interface FieldContextType {
     /** Whether the field is invalid */
-    isInvalid?: boolean;
+    invalid?: boolean;
     /** Whether the field is required */
-    isRequired?: boolean;
+    required?: boolean;
     /** Whether the field is disabled */
-    isDisabled?: boolean;
+    disabled?: boolean;
 }
 export interface FieldWrapperProps {
     /** The field label */
@@ -13,11 +13,11 @@ export interface FieldWrapperProps {
     /** The error message to display */
     errorMessage?: string;
     /** Whether the field is invalid */
-    isInvalid?: boolean;
+    invalid?: boolean;
     /** Whether the field is required */
-    isRequired?: boolean;
+    required?: boolean;
     /** Whether the field is disabled */
-    isDisabled?: boolean;
+    disabled?: boolean;
     /** Helper text to display below the field */
     helperText?: string;
     /** The field content (input, select, etc.) */
@@ -35,8 +35,8 @@ export interface FieldWrapperProps {
  * <FieldWrapper
  *   label="Email"
  *   errorMessage="Please enter a valid email"
- *   isInvalid={hasError}
- *   isRequired
+ *   invalid={hasError}
+ *   required
  * >
  *   <Input type="email" />
  * </FieldWrapper>

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

@@ -1,12 +1,13 @@
+import { ReactNode } from 'react';
 import { InputProps as ChakraInputProps } from '@chakra-ui/react';
 /**
  * Props for the Input component
  */
 export interface InputProps extends ChakraInputProps {
     /** Label text displayed above the input */
-    label?: string;
+    label?: ReactNode;
     /** Whether the input is disabled */
-    isDisabled?: boolean;
+    disabled?: boolean;
 }
 /**
  * A reusable input component that extends Chakra UI's Input with floating label and field validation
@@ -16,7 +17,7 @@ export interface InputProps extends ChakraInputProps {
  * <Input
  *   label="Email"
  *   placeholder="Enter your email"
- *   isRequired
+ *   required
  * />
  * ```
  */

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

@@ -20,7 +20,7 @@ export interface InputMaskProps extends Omit<InputProps, 'onChange'> {
  *   label="Phone"
  *   mask="(999) 999-9999"
  *   placeholder="(555) 555-5555"
- *   isRequired
+ *   required
  * />
  * ```
  */

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

@@ -11,15 +11,15 @@ 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 */
     onChange?: (value: string) => void;
     /** Whether the input is required */
-    isRequired?: boolean;
+    required?: 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 */
@@ -51,12 +51,12 @@ declare const formatPhoneIntl: (val: string) => string;
  * <InputPhone
  *   value="+33612345678"
  *   onChange={setPhoneNumber}
- *   isRequired
+ *   required
  * />
  * ```
  */
 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, required, 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

@@ -6,7 +6,7 @@ type CustomProps = {
     onChange?(value?: string): void;
     delay?: number;
     clearLabel?: string;
-    inputProps?: object;
+    inputProps?: InputProps;
     isDisabled?: boolean;
     customEndElement?: React.ReactNode;
 };

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

@@ -11,39 +11,56 @@ export interface SelectOptionType {
     isDisabled?: boolean;
 }
 /**
- * Props for Select component extending react-select props
+ * Props for single-select mode
  */
-export interface SelectProps extends Omit<ReactSelectProps<SelectOptionType, boolean>, 'options' | 'isMulti' | 'onChange' | 'value'> {
+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;
+    /** 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;
+    disabled?: boolean;
+}
+/**
+ * Props for multi-select mode
+ */
+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[]>;
-    /** 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;
+    disabled?: boolean;
 }
 /**
- * A flexible Select component built on react-select
- *
- * @example
- * ```tsx
- * <Select
- *   options={[{value: 'option1', label: 'Option 1'}]}
- *   placeholder="Choose an option..."
- *   isClearable
- * />
- * ```
+ * 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

@@ -3,7 +3,7 @@ import { BoxProps, DrawerRootProps } from '@chakra-ui/react';
 /**
  * Theme configuration for sidebar styling
  */
-interface SidebarTheme {
+export interface SidebarTheme {
     /** Width of the sidebar in desktop mode */
     width?: string;
     /** Background color */
@@ -13,14 +13,14 @@ interface SidebarTheme {
     /** Box shadow */
     boxShadow?: string;
     /** Z-index value */
-    zIndex?: number;
+    zIndex?: number | string;
     /** Transition duration for animations */
     transitionDuration?: string;
 }
 /**
  * Props for individual navigation items in the sidebar
  */
-interface NavItemProps {
+export interface NavItemProps {
     /** Icon component to display before the label */
     icon?: React.ElementType;
     /** Text label for the navigation item */
@@ -45,7 +45,7 @@ interface NavItemProps {
 /**
  * Props for navigation sections that group related navigation items
  */
-interface NavSectionProps {
+export interface NavSectionProps {
     /** Optional title for the navigation section */
     title?: string;
     /** Array of navigation items to display in this section */
@@ -58,14 +58,24 @@ interface NavSectionProps {
 /**
  * Props for the sidebar body component that contains navigation sections
  */
-interface SidebarBodyProps {
+export interface SidebarBodyProps {
     navSections: NavSectionProps[] | null;
 }
+/**
+ * Context type for the sidebar
+ */
+export interface SidebarContextType {
+    pathname: string;
+    displayDrawer: boolean;
+    navItemsAs?: React.ElementType;
+    navItemsProps?: (item: NavItemProps) => Record<string, any>;
+}
 /**
  * Props for the sidebar root component
  */
-interface SidebarRootProps extends SidebarProps {
+export interface SidebarRootProps extends SidebarProps {
     pathname: string;
+    displayDrawer: boolean;
     navItemsAs?: React.ElementType;
     navItemsProps?: (item: NavItemProps) => Record<string, any>;
 }
@@ -73,14 +83,12 @@ interface SidebarRootProps extends SidebarProps {
  * 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;
+    containerRef?: RefObject<HTMLElement | null>;
     /** Path to the active item */
     activePath?: string;
     /** Child components (Header, Body, Footer) to render inside the sidebar */
@@ -102,7 +110,7 @@ export interface SidebarProps extends Omit<DrawerRootProps, 'open'> {
  * ```
  */
 declare const Sidebar: {
-    ({ breakpoints, open, setOpen, containerRef, children, theme, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+    ({ 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>;
@@ -112,6 +120,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;
+    Root: ({ pathname, navItemsAs, navItemsProps, displayDrawer, ...props }: SidebarRootProps) => import("react/jsx-runtime").JSX.Element;
 };
 export { Sidebar };