@paygreen/pgui 2.1.2 → 2.1.3

package/dist/esm/types/components/DayPicker/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DayPickerProps } from 'react-day-picker';
+export declare const DayPicker: (props: DayPickerProps) => JSX.Element;

package/dist/esm/types/components/InputDayPicker/index.d.ts

@@ -0,0 +1,16 @@
+import { Dispatch, SetStateAction } from 'react';
+import { InputProps, PopoverProps } from '@chakra-ui/react';
+import { DayPickerSingleProps, DaySelectionMode } from 'react-day-picker';
+export declare type SingleDayPickerProps = {
+    mode?: DaySelectionMode;
+} & DayPickerSingleProps;
+export declare type InputDayPickerProps = {
+    isDisabled?: boolean;
+    popoverProps?: PopoverProps;
+    inputProps?: InputProps;
+    dayPickerProps?: SingleDayPickerProps;
+    dateFormat?: string;
+    value?: string | '';
+    onChange?: Dispatch<SetStateAction<string | undefined>>;
+};
+export declare const InputDayPicker: ({ isDisabled, popoverProps, inputProps, dayPickerProps, dateFormat, value, onChange, }: InputDayPickerProps) => JSX.Element;

package/dist/esm/types/components/Select/index.d.ts

@@ -13,6 +13,7 @@ export declare type SelectProps<Option, IsMulti extends boolean = false, Group e
     loadOptions?: (input: unknown) => TODO;
     defaultOptions?: unknown | boolean;
     debounceDelay?: number;
+    variant?: 'unstyled' | 'filled' | 'outlined';
 } & Props<Option, IsMulti, Group> & Omit<BoxProps, 'defaultValue'>;
 export declare const Select: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: {
     isAsync?: boolean | undefined;
@@ -23,6 +24,7 @@ export declare const Select: <Option, IsMulti extends boolean = false, Group ext
     loadOptions?: ((input: unknown) => TODO) | undefined;
     defaultOptions?: unknown | boolean;
     debounceDelay?: number | undefined;
+    variant?: "unstyled" | "filled" | "outlined" | undefined;
 } & Omit<Pick<import("react-select/dist/declarations/src/Select").Props<Option, IsMulti, Group>, "aria-label" | "form" | "autoFocus" | "name" | "value" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme"> & {
     placeholder?: React.ReactNode;
     tabIndex?: number | undefined;

package/dist/esm/types/components/index.d.ts

@@ -1,6 +1,8 @@
 export * from './ActionsButton';
 export * from './DataList';
+export * from './DayPicker';
 export * from './FormGroup';
+export * from './InputDayPicker';
 export * from './Pagination';
 export * from './SearchInput';
 export * from './Select';

package/dist/esm/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
+export * from './layout';
 export * from './theme';

package/dist/esm/types/layout/TopBar/index.d.ts

@@ -0,0 +1,10 @@
+import { ReactComponentElement } from 'react';
+import { FlexProps, StackProps } from '@chakra-ui/react';
+export declare type TopBarBackActionProps = {
+    backAction?: () => void;
+    rightInformation?: ReactComponentElement<any>;
+} & FlexProps;
+export declare const TopBar: ({ ...props }: StackProps) => JSX.Element;
+export declare const TopBarFirstElement: ({ ...props }: FlexProps) => JSX.Element;
+export declare const TopBarLastElement: ({ ...props }: StackProps) => JSX.Element;
+export declare const TopBarBackAction: ({ backAction, title, rightInformation, ...rest }: TopBarBackActionProps) => JSX.Element;

package/dist/esm/types/layout/index.d.ts

@@ -0,0 +1 @@
+export * from './TopBar';

package/dist/esm/types/theme/components/button.d.ts

@@ -91,9 +91,6 @@ declare const _default: {
             };
         };
         '@white': (props: any) => {
-            borderWidth: string;
-            borderStyle: string;
-            borderColor: string;
             bg: string;
             color: string;
             _focus: {
@@ -111,9 +108,6 @@ declare const _default: {
             };
         };
         '@whiteNeutral': (props: any) => {
-            borderWidth: string;
-            borderStyle: string;
-            borderColor: string;
             bg: string;
             color: string;
             _focus: {

package/dist/esm/types/theme/externals/index.d.ts

@@ -0,0 +1 @@
+export { reactDayPicker } from './reactDayPicker';

package/dist/esm/types/theme/externals/reactDayPicker.d.ts

@@ -0,0 +1,2 @@
+import { Styles } from '@chakra-ui/theme-tools';
+export declare const reactDayPicker: Styles['global'];

package/dist/esm/types/theme/externals-css.d.ts

@@ -0,0 +1 @@
+import 'react-day-picker/dist/style.css';

package/dist/esm/types/theme/foundations/colors.d.ts

@@ -62,4 +62,5 @@ export declare const colors: {
     gradients: {
         primary: string;
     };
+    background: string;
 };

package/dist/esm/types/theme/foundations/index.d.ts

@@ -81,6 +81,7 @@ declare const foundations: {
         gradients: {
             primary: string;
         };
+        background: string;
     };
 };
 export default foundations;

package/dist/esm/types/theme/index.d.ts

@@ -1 +1,2 @@
+import './externals-css';
 export * from './theme';

package/dist/esm/types/theme/styles.d.ts

@@ -0,0 +1,2 @@
+import { Styles } from '@chakra-ui/theme-tools';
+export declare const styles: Styles;

package/dist/esm/types/utils/date.d.ts

@@ -0,0 +1 @@
+export declare const dateFormat = "dd/MM/yyyy";

package/dist/index.d.ts

@@ -1,6 +1,8 @@
-import React, { FC, ReactNode } from 'react';
+/// <reference types="react" />
+import React, { FC, ReactNode, Dispatch, SetStateAction, ReactComponentElement } from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { IconButtonProps, FlexProps, AccordionProps, FormControlProps, StackProps, InputProps, BoxProps } from '@chakra-ui/react';
+import { IconButtonProps, FlexProps, AccordionProps, FormControlProps, PopoverProps, InputProps, StackProps, BoxProps } from '@chakra-ui/react';
+import { DayPickerProps, DaySelectionMode, DayPickerSingleProps } from 'react-day-picker';
 import * as react_select_dist_declarations_src_useStateManager from 'react-select/dist/declarations/src/useStateManager';
 import * as react_select from 'react-select';
 import { GroupBase, Props } from 'react-select';
@@ -53,6 +55,8 @@ declare type DataListProps = AccordionProps & {
 };
 declare const DataList: FC<React.PropsWithChildren<DataListProps>>;
 
+declare const DayPicker: (props: DayPickerProps) => JSX.Element;
+
 declare type FormGroupProps = Omit<FormControlProps, 'onChange' | 'defaultValue' | 'label'> & {
     children?: ReactNode;
     errorMessage?: ReactNode;
@@ -64,6 +68,20 @@ declare type FormGroupProps = Omit<FormControlProps, 'onChange' | 'defaultValue'
 };
 declare const FormGroup: ({ children, errorMessage, helper, id, isRequired, label, showError, ...props }: FormGroupProps) => JSX.Element;
 
+declare type SingleDayPickerProps = {
+    mode?: DaySelectionMode;
+} & DayPickerSingleProps;
+declare type InputDayPickerProps = {
+    isDisabled?: boolean;
+    popoverProps?: PopoverProps;
+    inputProps?: InputProps;
+    dayPickerProps?: SingleDayPickerProps;
+    dateFormat?: string;
+    value?: string | '';
+    onChange?: Dispatch<SetStateAction<string | undefined>>;
+};
+declare const InputDayPicker: ({ isDisabled, popoverProps, inputProps, dayPickerProps, dateFormat, value, onChange, }: InputDayPickerProps) => JSX.Element;
+
 declare const getPaginationInfo: ({ page, pageSize, totalItems, }: {
     page?: number | undefined;
     pageSize?: number | undefined;
@@ -128,6 +146,7 @@ declare type SelectProps<Option, IsMulti extends boolean = false, Group extends
     loadOptions?: (input: unknown) => TODO;
     defaultOptions?: unknown | boolean;
     debounceDelay?: number;
+    variant?: 'unstyled' | 'filled' | 'outlined';
 } & Props<Option, IsMulti, Group> & Omit<BoxProps, 'defaultValue'>;
 declare const Select: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: {
     isAsync?: boolean | undefined;
@@ -138,6 +157,7 @@ declare const Select: <Option, IsMulti extends boolean = false, Group extends Gr
     loadOptions?: ((input: unknown) => TODO) | undefined;
     defaultOptions?: unknown | boolean;
     debounceDelay?: number | undefined;
+    variant?: "unstyled" | "filled" | "outlined" | undefined;
 } & Omit<Pick<react_select_dist_declarations_src_Select.Props<Option, IsMulti, Group>, "aria-label" | "form" | "autoFocus" | "name" | "value" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme"> & {
     placeholder?: React.ReactNode;
     tabIndex?: number | undefined;
@@ -228,6 +248,15 @@ declare const Select: <Option, IsMulti extends boolean = false, Group extends Gr
     tabSelectsValue?: boolean | undefined;
 } & {}> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<Option> & Omit<BoxProps, "defaultValue"> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
 
+declare type TopBarBackActionProps = {
+    backAction?: () => void;
+    rightInformation?: ReactComponentElement<any>;
+} & FlexProps;
+declare const TopBar: ({ ...props }: StackProps) => JSX.Element;
+declare const TopBarFirstElement: ({ ...props }: FlexProps) => JSX.Element;
+declare const TopBarLastElement: ({ ...props }: StackProps) => JSX.Element;
+declare const TopBarBackAction: ({ backAction, title, rightInformation, ...rest }: TopBarBackActionProps) => JSX.Element;
+
 declare const theme: any;
 
-export { ActionsButton, ActionsButtonProps, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListCellProps, DataListContext, DataListFooter, DataListFooterProps, DataListHeader, DataListHeaderContext, DataListHeaderProps, DataListProps, DataListRow, DataListRowProps, FormGroup, FormGroupProps, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationContextValue, PaginationInfo, PaginationProps, SearchInput, Select, SelectProps, getPaginationInfo, theme };
+export { ActionsButton, ActionsButtonProps, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListCellProps, DataListContext, DataListFooter, DataListFooterProps, DataListHeader, DataListHeaderContext, DataListHeaderProps, DataListProps, DataListRow, DataListRowProps, DayPicker, FormGroup, FormGroupProps, InputDayPicker, InputDayPickerProps, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationContextValue, PaginationInfo, PaginationProps, SearchInput, Select, SelectProps, SingleDayPickerProps, TopBar, TopBarBackAction, TopBarBackActionProps, TopBarFirstElement, TopBarLastElement, getPaginationInfo, theme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paygreen/pgui",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "PGUI is the design system coming from Paygreen.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -65,7 +65,7 @@
     "@typescript-eslint/eslint-plugin": "^5.30.6",
     "@typescript-eslint/parser": "^5.30.6",
     "babel-loader": "^8.2.5",
-    "dayjs": "^1.11.4",
+    "date-fns": "^2.29.1",
     "eslint": "^8.20.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -82,6 +82,7 @@
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
+    "react-day-picker": "^8.0.7",
     "react-dom": "^18.2.0",
     "react-focus-lock": "^2.9.1",
     "react-icons": "^4.4.0",