@paygreen/pgui 3.0.1-beta → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,3 @@
1
- import { Locale } from 'date-fns';
2
1
  /**
3
2
  * Props for the DatePicker component
4
3
  */
@@ -13,10 +12,10 @@ export interface DatePickerProps {
13
12
  isRange?: boolean;
14
13
  /** Whether to enable time selection */
15
14
  isDateTime?: boolean;
16
- /** Placeholder text for the input */
17
- placeholderText?: string;
18
- /** Locale for date formatting and translations */
19
- locale?: Locale;
15
+ /** Custom placeholder text for the input (overrides default format placeholder) */
16
+ placeholder?: string;
17
+ /** Locale string for date formatting and translations ('en', 'fr') */
18
+ locale?: 'en' | 'fr';
20
19
  /** Minimum selectable date */
21
20
  minDate?: Date;
22
21
  /** Maximum selectable date */
@@ -27,17 +26,44 @@ export interface DatePickerProps {
27
26
  onBlur?: () => void;
28
27
  /** Whether the input is disabled */
29
28
  isDisabled?: boolean;
29
+ /** Whether to show a clear button when there's a value (default: true) */
30
+ clearable?: boolean;
30
31
  }
31
32
  /**
32
33
  * A reusable date picker component with floating label and range selection support
33
34
  *
34
35
  * @example
35
36
  * ```tsx
37
+ * // Default behavior - shows format as placeholder (mm/dd/yyyy)
36
38
  * <DatePicker
37
39
  * label="Birthdate"
38
40
  * value={date}
39
41
  * onChange={setDate}
40
42
  * />
43
+ *
44
+ * // French locale - shows French format (jj/mm/aaaa)
45
+ * <DatePicker
46
+ * label="Date de naissance"
47
+ * value={date}
48
+ * onChange={setDate}
49
+ * locale="fr"
50
+ * />
51
+ *
52
+ * // With custom placeholder (overrides default format)
53
+ * <DatePicker
54
+ * label="Birthdate"
55
+ * value={date}
56
+ * onChange={setDate}
57
+ * placeholderText="Choose your birthdate"
58
+ * />
59
+ *
60
+ * // To disable the clear button:
61
+ * <DatePicker
62
+ * label="Birthdate"
63
+ * value={date}
64
+ * onChange={setDate}
65
+ * clearable={false}
66
+ * />
41
67
  * ```
42
68
  */
43
69
  declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLInputElement>>;
@@ -11,7 +11,7 @@ export interface InputPhoneProps {
11
11
  /** Placeholder text for the input */
12
12
  placeholder?: string;
13
13
  /** Whether the input is disabled */
14
- isDisabled?: boolean;
14
+ disabled?: boolean;
15
15
  /** Additional props to pass to the input element */
16
16
  inputProps?: Record<string, unknown>;
17
17
  /** Callback fired when the phone number changes */
@@ -19,7 +19,7 @@ export interface InputPhoneProps {
19
19
  /** Whether the input is required */
20
20
  isRequired?: boolean;
21
21
  /** Whether the input is invalid */
22
- isInvalid?: boolean;
22
+ invalid?: boolean;
23
23
  /** Error message to display when invalid */
24
24
  errorMessage?: string;
25
25
  /** Custom labels for the country search component */
@@ -56,7 +56,7 @@ declare const formatPhoneIntl: (val: string) => string;
56
56
  * ```
57
57
  */
58
58
  declare const InputPhone: {
59
- ({ locale, label, value, placeholder, isDisabled, inputProps, onChange, isRequired, isInvalid, errorMessage, searchLabels, ...props }: InputPhoneProps): import("react/jsx-runtime").JSX.Element;
59
+ ({ locale, label, value, placeholder, disabled, inputProps, onChange, isRequired, invalid, errorMessage, searchLabels, ...props }: InputPhoneProps): import("react/jsx-runtime").JSX.Element;
60
60
  displayName: string;
61
61
  };
62
62
  export { formatPhoneIntl, InputPhone, isValidPhone };
@@ -6,7 +6,7 @@ type CustomProps = {
6
6
  onChange?(value?: string): void;
7
7
  delay?: number;
8
8
  clearLabel?: string;
9
- inputProps?: object;
9
+ inputProps?: InputProps;
10
10
  isDisabled?: boolean;
11
11
  customEndElement?: React.ReactNode;
12
12
  };
@@ -11,39 +11,56 @@ export interface SelectOptionType {
11
11
  isDisabled?: boolean;
12
12
  }
13
13
  /**
14
- * Props for Select component extending react-select props
14
+ * Props for single-select mode
15
15
  */
16
- export interface SelectProps extends Omit<ReactSelectProps<SelectOptionType, boolean>, 'options' | 'isMulti' | 'onChange' | 'value'> {
16
+ export interface SingleSelectProps extends Omit<ReactSelectProps<SelectOptionType, false>, 'options' | 'isMulti' | 'onChange' | 'value'> {
17
17
  /** Array of options to display */
18
18
  options?: SelectOptionType[];
19
- /** Enable multi-selection */
20
- isMulti?: boolean;
19
+ /** Enable multi-selection - must be false or undefined */
20
+ isMulti?: false;
21
+ /** Current value for controlled component */
22
+ value?: SingleValue<SelectOptionType> | null;
23
+ /** onChange handler for controlled component */
24
+ onChange?: (value: SingleValue<SelectOptionType> | null, actionMeta: ActionMeta<SelectOptionType>) => void;
25
+ /** Enable async loading of options */
26
+ isAsync?: boolean;
27
+ /** Enable creating new options */
28
+ isCreatable?: boolean;
29
+ /** Function to load options asynchronously */
30
+ loadOptions?: (inputValue: string) => Promise<SelectOptionType[]>;
31
+ /** Name attribute for form integration */
32
+ name?: string;
33
+ /** Whether the select is in invalid state */
34
+ invalid?: boolean;
35
+ disabled?: boolean;
36
+ }
37
+ /**
38
+ * Props for multi-select mode
39
+ */
40
+ export interface MultiSelectProps extends Omit<ReactSelectProps<SelectOptionType, true>, 'options' | 'isMulti' | 'onChange' | 'value'> {
41
+ /** Array of options to display */
42
+ options?: SelectOptionType[];
43
+ /** Enable multi-selection - must be true */
44
+ isMulti: true;
45
+ /** Current value for controlled component - never null in multi mode, always an array */
46
+ value?: MultiValue<SelectOptionType>;
47
+ /** onChange handler for controlled component - never receives null in multi mode */
48
+ onChange?: (value: MultiValue<SelectOptionType>, actionMeta: ActionMeta<SelectOptionType>) => void;
21
49
  /** Enable async loading of options */
22
50
  isAsync?: boolean;
23
51
  /** Enable creating new options */
24
52
  isCreatable?: boolean;
25
53
  /** Function to load options asynchronously */
26
54
  loadOptions?: (inputValue: string) => Promise<SelectOptionType[]>;
27
- /** Current value for controlled component */
28
- value?: SingleValue<SelectOptionType> | MultiValue<SelectOptionType> | null;
29
- /** onChange handler for controlled component */
30
- onChange?: (value: SingleValue<SelectOptionType> | MultiValue<SelectOptionType> | null, actionMeta: ActionMeta<SelectOptionType>) => void;
31
55
  /** Name attribute for form integration */
32
56
  name?: string;
33
57
  /** Whether the select is in invalid state */
34
58
  invalid?: boolean;
59
+ disabled?: boolean;
35
60
  }
36
61
  /**
37
- * A flexible Select component built on react-select
38
- *
39
- * @example
40
- * ```tsx
41
- * <Select
42
- * options={[{value: 'option1', label: 'Option 1'}]}
43
- * placeholder="Choose an option..."
44
- * isClearable
45
- * />
46
- * ```
62
+ * Union type for Select component props
47
63
  */
64
+ export type SelectProps = SingleSelectProps | MultiSelectProps;
48
65
  declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<any>>;
49
66
  export { Select };
@@ -3,7 +3,7 @@ import { BoxProps, DrawerRootProps } from '@chakra-ui/react';
3
3
  /**
4
4
  * Theme configuration for sidebar styling
5
5
  */
6
- interface SidebarTheme {
6
+ export interface SidebarTheme {
7
7
  /** Width of the sidebar in desktop mode */
8
8
  width?: string;
9
9
  /** Background color */
@@ -20,7 +20,7 @@ interface SidebarTheme {
20
20
  /**
21
21
  * Props for individual navigation items in the sidebar
22
22
  */
23
- interface NavItemProps {
23
+ export interface NavItemProps {
24
24
  /** Icon component to display before the label */
25
25
  icon?: React.ElementType;
26
26
  /** Text label for the navigation item */
@@ -45,7 +45,7 @@ interface NavItemProps {
45
45
  /**
46
46
  * Props for navigation sections that group related navigation items
47
47
  */
48
- interface NavSectionProps {
48
+ export interface NavSectionProps {
49
49
  /** Optional title for the navigation section */
50
50
  title?: string;
51
51
  /** Array of navigation items to display in this section */
@@ -58,14 +58,24 @@ interface NavSectionProps {
58
58
  /**
59
59
  * Props for the sidebar body component that contains navigation sections
60
60
  */
61
- interface SidebarBodyProps {
61
+ export interface SidebarBodyProps {
62
62
  navSections: NavSectionProps[] | null;
63
63
  }
64
+ /**
65
+ * Context type for the sidebar
66
+ */
67
+ export interface SidebarContextType {
68
+ pathname: string;
69
+ displayDrawer: boolean;
70
+ navItemsAs?: React.ElementType;
71
+ navItemsProps?: (item: NavItemProps) => Record<string, any>;
72
+ }
64
73
  /**
65
74
  * Props for the sidebar root component
66
75
  */
67
- interface SidebarRootProps extends SidebarProps {
76
+ export interface SidebarRootProps extends SidebarProps {
68
77
  pathname: string;
78
+ displayDrawer: boolean;
69
79
  navItemsAs?: React.ElementType;
70
80
  navItemsProps?: (item: NavItemProps) => Record<string, any>;
71
81
  }
@@ -73,14 +83,12 @@ interface SidebarRootProps extends SidebarProps {
73
83
  * Main props for the Sidebar component
74
84
  */
75
85
  export interface SidebarProps extends Omit<DrawerRootProps, 'open'> {
76
- /** Custom breakpoint configuration for responsive behavior */
77
- breakpoints?: any[] | Partial<Record<string, any>>;
78
86
  /** Whether the sidebar is currently open/visible */
79
87
  open: boolean;
80
88
  /** Function to control the sidebar open/close state */
81
89
  setOpen: (val: boolean) => void;
82
90
  /** Reference to the container element where the drawer portal should be rendered */
83
- containerRef: RefObject<HTMLElement | null> | undefined;
91
+ containerRef?: RefObject<HTMLElement | null>;
84
92
  /** Path to the active item */
85
93
  activePath?: string;
86
94
  /** Child components (Header, Body, Footer) to render inside the sidebar */
@@ -102,7 +110,7 @@ export interface SidebarProps extends Omit<DrawerRootProps, 'open'> {
102
110
  * ```
103
111
  */
104
112
  declare const Sidebar: {
105
- ({ breakpoints, open, setOpen, containerRef, children, theme, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
113
+ ({ open, setOpen, containerRef, children, theme, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
106
114
  NavItem: import('react').NamedExoticComponent<NavItemProps>;
107
115
  NavSection: import('react').NamedExoticComponent<NavSectionProps>;
108
116
  Body: import('react').NamedExoticComponent<SidebarBodyProps>;
@@ -112,6 +120,6 @@ declare const Sidebar: {
112
120
  Footer({ children, ...props }: {
113
121
  children: ReactNode;
114
122
  } & Partial<BoxProps>): import("react/jsx-runtime").JSX.Element;
115
- Root: ({ pathname, navItemsAs, navItemsProps, ...props }: SidebarRootProps) => import("react/jsx-runtime").JSX.Element;
123
+ Root: ({ pathname, navItemsAs, navItemsProps, displayDrawer, ...props }: SidebarRootProps) => import("react/jsx-runtime").JSX.Element;
116
124
  };
117
125
  export { Sidebar };