@paygreen/pgui 2.3.0 → 2.5.0

package/dist/cjs/types/components/ModalResponsive/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DrawerProps, ModalProps } from '@chakra-ui/react';
+declare type ModalResponsiveProps = ModalProps & DrawerProps;
+export declare const ModalResponsive: ({ isOpen, onClose, finalFocusRef, children, ...rest }: ModalResponsiveProps) => JSX.Element;
+export {};

package/dist/cjs/types/components/Textarea/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TextareaProps } from '@chakra-ui/react';
+export declare const Textarea: ({ onFocus, onBlur, onMouseEnter, onMouseLeave, variant, borderRadius, ...rest }: TextareaProps & {
+    onFocus?: (() => void) | undefined;
+    onBlur?: (() => void) | undefined;
+    onMouseEnter?: (() => void) | undefined;
+    onMouseLeave?: (() => void) | undefined;
+}) => JSX.Element;

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

@@ -5,6 +5,7 @@ export * from './DataList';
 export * from './DayPicker';
 export * from './FormGroup';
 export * from './InputDayPicker';
+export * from './ModalResponsive';
 export * from './Pagination';
 export * from './SearchInput';
 export * from './Select';

package/dist/cjs/types/theme/components/checkbox.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+    };
+    baseStyle: {
+        control: {
+            borderRadius: string;
+        };
+    };
+};
+export default _default;

package/dist/cjs/types/theme/components/index.d.ts

@@ -1,5 +1,12 @@
 export { default as Badge } from './badge';
 export { default as Button } from './button';
+export { default as Checkbox } from './checkbox';
 export { default as Drawer } from './drawer';
 export { default as Input } from './input';
+export { default as NumberInput } from './number-input';
+export { default as PinInput } from './pin-input';
+export { default as Radio } from './radio';
+export { default as Slider } from './slider';
+export { default as Switch } from './switch';
 export { default as Tag } from './tag';
+export { default as Textarea } from './textarea';

package/dist/cjs/types/theme/components/input.d.ts

@@ -9,7 +9,6 @@ declare const _default: {
             field: {
                 bg: string;
                 borderColor: string;
-                borderRadius: string;
                 _focus: {
                     borderColor: string;
                 };
@@ -26,7 +25,6 @@ declare const _default: {
                 bg: string;
                 borderWidth: string;
                 borderColor: string;
-                borderRadius: string;
                 _hover: {
                     bg: string;
                     borderColor: string;

package/dist/cjs/types/theme/components/number-input.d.ts

@@ -0,0 +1,54 @@
+declare const _default: {
+    baseStyle: {
+        field: {
+            borderRadius: string;
+        };
+        stepperGroup: {
+            width: string;
+        };
+        stepper: {
+            paddingRight: string;
+        };
+    };
+    variants: {
+        outline: (props: any) => {
+            field: {
+                bg: string;
+                borderColor: string;
+                borderRadius: string;
+                _focus: {
+                    borderColor: string;
+                };
+                _focusVisible: {
+                    boxShadow: string;
+                };
+            };
+            addon: {
+                borderRadius: string;
+            };
+        };
+        filled: (props: any) => {
+            field: {
+                bg: string;
+                borderWidth: string;
+                borderColor: string;
+                borderRadius: string;
+                _hover: {
+                    bg: string;
+                    borderColor: string;
+                };
+                _focus: {
+                    bg: string;
+                    borderColor: string;
+                };
+                _focusVisible: {
+                    boxShadow: string;
+                };
+            };
+            addon: {
+                borderRadius: string;
+            };
+        };
+    };
+};
+export default _default;

package/dist/cjs/types/theme/components/pin-input.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    variants: {
+        outline: (props: any) => {
+            bg: string;
+            borderColor: string;
+            _focus: {
+                borderColor: string;
+            };
+            _focusVisible: {
+                boxShadow: string;
+            };
+        };
+        filled: (props: any) => {
+            bg: string;
+            borderWidth: string;
+            borderColor: string;
+            _hover: {
+                bg: string;
+                borderColor: string;
+            };
+            _focus: {
+                bg: string;
+                borderColor: string;
+            };
+            _focusVisible: {
+                boxShadow: string;
+            };
+        };
+    };
+};
+export default _default;

package/dist/cjs/types/theme/components/radio.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+    };
+};
+export default _default;

package/dist/cjs/types/theme/components/slider.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+    };
+};
+export default _default;

package/dist/cjs/types/theme/components/switch.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+    };
+};
+export default _default;

package/dist/cjs/types/theme/components/textarea.d.ts

@@ -0,0 +1,42 @@
+declare const _default: {
+    baseStyle: {
+        paddingY: string;
+        minHeight: string;
+        lineHeight: string;
+        verticalAlign: string;
+        borderRadius: string;
+    };
+    variants: {
+        outline: (props: any) => {
+            bg: string;
+            borderColor: string;
+            _focus: {
+                borderColor: string;
+            };
+            _focusVisible: {
+                boxShadow: string;
+            };
+        };
+        filled: (props: any) => {
+            bg: string;
+            borderWidth: string;
+            borderColor: string;
+            _hover: {
+                bg: string;
+                borderColor: string;
+            };
+            _focus: {
+                bg: string;
+                borderColor: string;
+            };
+            _focusVisible: {
+                boxShadow: string;
+            };
+        };
+    };
+    defaultProps: {
+        size: string;
+        variant: string;
+    };
+};
+export default _default;

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useContext, createContext, forwardRef as forwardRef$1, useLayoutEffect, createElement, Fragment, Component, useCallback, useMemo } from 'react';
-import { forwardRef, IconButton, Flex, createStylesContext, chakra, useMultiStyleConfig, useMenuItem, MenuIcon, MenuCommand, useMenuState, Icon, Text, useBreakpointValue, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Accordion, FormControl, FormLabel, FormHelperText, FormErrorMessage, SlideFade, useDisclosure, Popover, PopoverTrigger, InputGroup, Input as Input$1, InputRightElement, PopoverContent, PopoverArrow, HStack, useControllableState, useMergeRefs, useTheme, useColorModeValue, useStyleConfig, useToken, useBreakpoint, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, VStack, Button as Button$1, Stack, extendTheme } from '@chakra-ui/react';
+import { forwardRef, IconButton, Flex, createStylesContext, chakra, useMultiStyleConfig, useMenuItem, MenuIcon, MenuCommand, useMenuState, Icon, Text, useBreakpointValue, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Accordion, FormControl, FormLabel, FormHelperText, FormErrorMessage, SlideFade, useDisclosure, Popover, PopoverTrigger, InputGroup, Input as Input$2, InputRightElement, PopoverContent, PopoverArrow, useTheme, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, Modal, ModalOverlay, ModalContent, ModalCloseButton, HStack, useControllableState, useMergeRefs, useColorModeValue, useStyleConfig, useToken, useBreakpoint, VStack, Button as Button$1, Stack, extendTheme } from '@chakra-ui/react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -8659,7 +8659,7 @@ var DayPicker = function (props) {
 var FormGroup = function (_a) {
     var children = _a.children, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, isRequired = _a.isRequired, label = _a.label, showError = _a.showError, props = __rest$2(_a, ["children", "errorMessage", "helper", "id", "isRequired", "label", "showError"]);
     return (React__default.createElement(FormControl, __assign$2({ isInvalid: showError, isRequired: isRequired }, props),
-        !!label && React__default.createElement(FormLabel, { htmlFor: id }, label),
+        !!label && (React__default.createElement(FormLabel, { htmlFor: id, fontWeight: "bold" }, label)),
         children,
         !!helper && React__default.createElement(FormHelperText, null, helper),
         !!errorMessage && (React__default.createElement(FormErrorMessage, { id: "".concat(id, "-error") },
@@ -8750,7 +8750,7 @@ var InputDayPicker = function (_a) {
         React__default.createElement(Popover, __assign$2({ closeOnBlur: true, closeOnEsc: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", autoFocus: true }, popoverProps),
             React__default.createElement(PopoverTrigger, null,
                 React__default.createElement(InputGroup, null,
-                    React__default.createElement(Input$1, __assign$2({ value: value, onChange: handleInputChange, isDisabled: isDisabled, placeholder: "DD/MM/YYYY" }, inputProps)),
+                    React__default.createElement(Input$2, __assign$2({ value: value, onChange: handleInputChange, isDisabled: isDisabled, placeholder: "DD/MM/YYYY" }, inputProps)),
                     React__default.createElement(InputRightElement, { w: "fit-content", mr: "0.25rem", height: "".concat(renderInputRightElement()) },
                         React__default.createElement(IconButton, { "aria-label": "Calendrier", icon: React__default.createElement(Icon, { as: isOpen ? MdClose : MdCalendarToday, height: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.size) === 'xs' ? '0.5rem' : 'fit-content' }), size: "".concat(renderIconSize()), onClick: onToggle, isDisabled: isDisabled, variant: isOpen ? '@danger' : 'solid', w: "".concat(renderBtnSize()), h: "".concat(renderBtnSize()) })))),
             React__default.createElement(PopoverContent, null,
@@ -8758,6 +8758,25 @@ var InputDayPicker = function (_a) {
                 isOpen && (React__default.createElement(DayPicker, __assign$2({ initialFocus: isOpen, defaultMonth: selectedDay, selected: selectedDay, onSelect: handleDaySelect }, dayPickerProps, { mode: "single" })))))));
 };
 
+var ModalResponsive = function (_a) {
+    var _b;
+    var isOpen = _a.isOpen, onClose = _a.onClose, finalFocusRef = _a.finalFocusRef, children = _a.children, rest = __rest$2(_a, ["isOpen", "onClose", "finalFocusRef", "children"]);
+    var isMobile = useBreakpointValue({ base: true, md: false });
+    var theme = useTheme();
+    if (isMobile) {
+        return (React__default.createElement(Drawer, __assign$2({ isOpen: isOpen, placement: "bottom", onClose: onClose, finalFocusRef: finalFocusRef }, rest),
+            React__default.createElement(DrawerOverlay, null),
+            React__default.createElement(DrawerContent, { borderRadius: "".concat(((_b = theme === null || theme === void 0 ? void 0 : theme.radii) === null || _b === void 0 ? void 0 : _b.md) ? "".concat(theme.radii.md, " ").concat(theme.radii.md, " 0 0") : '0') },
+                React__default.createElement(DrawerCloseButton, null),
+                children)));
+    }
+    return (React__default.createElement(Modal, __assign$2({ isOpen: isOpen, onClose: onClose, finalFocusRef: finalFocusRef, isCentered: true }, rest),
+        React__default.createElement(ModalOverlay, null),
+        React__default.createElement(ModalContent, null,
+            React__default.createElement(ModalCloseButton, null),
+            children)));
+};
+
 var getPaginationInfo = function (_a) {
     var _b = _a.page, page = _b === void 0 ? 1 : _b, _c = _a.pageSize, pageSize = _c === void 0 ? 10 : _c, _d = _a.totalItems, totalItems = _d === void 0 ? 0 : _d;
     var firstItemOnPage = (page - 1) * pageSize + 1;
@@ -8861,7 +8880,7 @@ var SearchInput = forwardRef(function (_a, ref) {
         }
     };
     return (React__default.createElement(InputGroup, __assign$2({}, rest),
-        React__default.createElement(Input$1, { ref: refs, onChange: handleChange, value: search || '', placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Recherche...', isDisabled: isDisabled, onKeyDown: handleEscape }),
+        React__default.createElement(Input$2, { ref: refs, onChange: handleChange, value: search || '', placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Recherche...', isDisabled: isDisabled, onKeyDown: handleEscape }),
         React__default.createElement(InputRightElement, { color: isDisabled ? 'gray.300' : 'gray.400' }, !isDisabled && search ? (React__default.createElement(IconButton, { onClick: handleClear, variant: "@secondary", size: "xs", "aria-label": clearLabel !== null && clearLabel !== void 0 ? clearLabel : 'Effacer la recherche' },
             React__default.createElement(FiX, null))) : (React__default.createElement(FiSearch, null)))));
 });
@@ -43907,7 +43926,7 @@ var inputStyle = function inputStyle(isHidden) {
   }, spacingStyle);
 };
 
-var Input = function Input(props) {
+var Input$1 = function Input(props) {
   var className = props.className,
       cx = props.cx,
       getStyles = props.getStyles,
@@ -44169,7 +44188,7 @@ var components$1 = {
   GroupHeading: GroupHeading,
   IndicatorsContainer: IndicatorsContainer,
   IndicatorSeparator: IndicatorSeparator,
-  Input: Input,
+  Input: Input$1,
   LoadingIndicator: LoadingIndicator,
   Menu: Menu,
   MenuList: MenuList,
@@ -45263,7 +45282,7 @@ var defaultTheme = {
   spacing: spacing
 };
 
-var defaultProps = {
+var defaultProps$5 = {
   'aria-live': 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
@@ -47047,7 +47066,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
   return Select;
 }(Component);
 
-Select$1.defaultProps = defaultProps;
+Select$1.defaultProps = defaultProps$5;
 
 var StateManagedSelect = /*#__PURE__*/forwardRef$1(function (props, ref) {
   var baseSelectProps = useStateManager(props);
@@ -51059,6 +51078,19 @@ var button = {
     }
 };
 
+var defaultProps$4 = {
+    colorScheme: 'brand'
+};
+var baseStyle$1 = {
+    control: {
+        borderRadius: '4px'
+    }
+};
+var checkbox = {
+    defaultProps: defaultProps$4,
+    baseStyle: baseStyle$1
+};
+
 var getSize = function (value) {
     if (value === 'full') {
         return {
@@ -51076,12 +51108,66 @@ var drawer = {
     sizes: sizes$1
 };
 
-var input = {
+var Input = {
     baseStyle: {
         field: {
             borderRadius: 'full'
         }
     },
+    variants: {
+        outline: function (props) {
+            return {
+                field: {
+                    bg: 'white',
+                    borderColor: 'gray.200',
+                    _focus: {
+                        borderColor: 'brand.500'
+                    },
+                    _focusVisible: {
+                        boxShadow: "0 0 0 1px ".concat(props.theme.colors.brand[500])
+                    }
+                },
+                addon: {
+                    borderRadius: 'full'
+                }
+            };
+        },
+        filled: function (props) { return ({
+            field: {
+                bg: 'gray.50',
+                borderWidth: '1px',
+                borderColor: 'gray.200',
+                _hover: {
+                    bg: 'gray.50',
+                    borderColor: 'gray.200'
+                },
+                _focus: {
+                    bg: 'gray.50',
+                    borderColor: 'brand.500'
+                },
+                _focusVisible: {
+                    boxShadow: "0 0 0 1px ".concat(props.theme.colors.brand[500])
+                }
+            },
+            addon: {
+                borderRadius: 'full'
+            }
+        }); }
+    }
+};
+
+var numberInput = {
+    baseStyle: {
+        field: {
+            borderRadius: 'full'
+        },
+        stepperGroup: {
+            width: '2rem'
+        },
+        stepper: {
+            paddingRight: '0.2rem'
+        }
+    },
     variants: {
         outline: function (props) {
             return {
@@ -51126,6 +51212,35 @@ var input = {
     }
 };
 
+var variants$1 = {
+    outline: function (props) { var _a; return (_a = Input.variants.outline(props).field) !== null && _a !== void 0 ? _a : {}; },
+    filled: function (props) { var _a; return (_a = Input.variants.filled(props).field) !== null && _a !== void 0 ? _a : {}; }
+};
+var pinInput = {
+    variants: variants$1
+};
+
+var defaultProps$3 = {
+    colorScheme: 'brand'
+};
+var radio = {
+    defaultProps: defaultProps$3
+};
+
+var defaultProps$2 = {
+    colorScheme: 'brand'
+};
+var slider = {
+    defaultProps: defaultProps$2
+};
+
+var defaultProps$1 = {
+    colorScheme: 'brand'
+};
+var _switch = {
+    defaultProps: defaultProps$1
+};
+
 var tag = {
     baseStyle: {
         container: {
@@ -51135,13 +51250,35 @@ var tag = {
     }
 };
 
+var baseStyle = __assign$2(__assign$2({}, Input.baseStyle.field), { paddingY: '8px', minHeight: '80px', lineHeight: 'short', verticalAlign: 'top' });
+var variants = {
+    outline: function (props) { var _a; return (_a = Input.variants.outline(props).field) !== null && _a !== void 0 ? _a : {}; },
+    filled: function (props) { var _a; return (_a = Input.variants.filled(props).field) !== null && _a !== void 0 ? _a : {}; }
+};
+var defaultProps = {
+    size: 'md',
+    variant: 'outline'
+};
+var textarea = {
+    baseStyle: baseStyle,
+    variants: variants,
+    defaultProps: defaultProps
+};
+
 var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Badge: badge,
     Button: button,
+    Checkbox: checkbox,
     Drawer: drawer,
-    Input: input,
-    Tag: tag
+    Input: Input,
+    NumberInput: numberInput,
+    PinInput: pinInput,
+    Radio: radio,
+    Slider: slider,
+    Switch: _switch,
+    Tag: tag,
+    Textarea: textarea
 });
 
 var colors = {
@@ -51339,5 +51476,5 @@ var styles = {
 
 var theme = extendTheme(__assign$2(__assign$2({ styles: styles }, foundations), { components: __assign$2({}, components) }));
 
-export { ActionsButton, BottomBar, Card, ConfirmMenuItem, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListContext, DataListFooter, DataListHeader, DataListHeaderContext, DataListRow, DayPicker, FormGroup, InputDayPicker, LayoutContainer, MenuItem, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationInfo, SearchInput, Select, SideNav, SideNavBody, SideNavContainer, SideNavFooter, SideNavHeader, SideNavMenu, SideNavMenuItem, TopBar, TopBarBackAction, TopBarFirstElement, TopBarLastElement, dateFormat, getPaginationInfo, theme, useIsMobile };
+export { ActionsButton, BottomBar, Card, ConfirmMenuItem, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListContext, DataListFooter, DataListHeader, DataListHeaderContext, DataListRow, DayPicker, FormGroup, InputDayPicker, LayoutContainer, MenuItem, ModalResponsive, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationInfo, SearchInput, Select, SideNav, SideNavBody, SideNavContainer, SideNavFooter, SideNavHeader, SideNavMenu, SideNavMenuItem, TopBar, TopBarBackAction, TopBarFirstElement, TopBarLastElement, dateFormat, getPaginationInfo, theme, useIsMobile };
 //# sourceMappingURL=index.js.map