@paygreen/pgui 2.13.0 → 2.13.2

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

@@ -13,3 +13,4 @@ export { default as Slider } from './slider';
 export { default as Switch } from './switch';
 export { default as Tag } from './tag';
 export { default as Textarea } from './textarea';
+export { default as Tooltip } from './tooltip';

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

@@ -19,6 +19,9 @@ declare const _default: {
                 _focusVisible: {
                     boxShadow: string;
                 };
+                _placeholder: {
+                    color: string;
+                };
             };
             addon: {
                 borderRadius: string;
@@ -40,6 +43,9 @@ declare const _default: {
                     bg: string;
                     boxShadow: string;
                 };
+                _placeholder: {
+                    color: string;
+                };
             };
             addon: {
                 borderRadius: string;

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

@@ -12,6 +12,9 @@ declare const _default: {
             _focusVisible: {
                 boxShadow: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
         filled: (props: any) => {
             bg: string;
@@ -28,6 +31,9 @@ declare const _default: {
                 bg: string;
                 boxShadow: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
     };
 };

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

@@ -20,6 +20,9 @@ declare const _default: {
             _focusVisible: {
                 boxShadow: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
         filled: (props: any) => {
             bg: string;
@@ -36,6 +39,9 @@ declare const _default: {
                 bg: string;
                 boxShadow: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
     };
     defaultProps: {

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

@@ -0,0 +1,8 @@
+declare const _default: {
+    baseStyle: {
+        fontSize: string;
+        borderRadius: string;
+        padding: string;
+    };
+};
+export default _default;

package/dist/esm/index.js

@@ -46981,9 +46981,34 @@ var PaginationButtonNextPage = function (_a) {
 };
 var PaginationInfo = function (_a) {
     var rest = __rest$c(_a, []);
-    var _b = useContext(PaginationContext), isLoadingPage = _b.isLoadingPage, page = _b.page, lastPage = _b.lastPage, setPage = _b.setPage;
+    var _b = useContext(PaginationContext), isLoadingPage = _b.isLoadingPage, page = _b.page, firstPage = _b.firstPage, lastPage = _b.lastPage, setPage = _b.setPage;
     var _c = useState(false), isEdit = _c[0], setIsEdit = _c[1];
+    var _d = useState(page), inputValue = _d[0], setInputValue = _d[1];
     var numberInputRef = useRef(null);
+    /**
+     * Handles the page change event.
+     *
+     * @param {string} value - The value from the input field.
+     * @returns {number} The new page number.
+     *
+     * The function first tries to parse the input value to an integer.
+     * If the input is not a number, it defaults to the `firstPage`.
+     * If the input exceeds the `lastPage`, it sets the page to the `lastPage`.
+     * If the input is less than `firstPage`, it sets the page to the `firstPage`.
+     */
+    var handlePageChange = function (value) {
+        var newPage = parseInt(value, 10);
+        if (isNaN(newPage)) {
+            newPage = firstPage; // default to first page if input is not a number
+        }
+        else if (newPage >= parseInt(lastPage, 10)) {
+            newPage = lastPage; // set to last page if input exceeds last page
+        }
+        else if (newPage < parseInt(firstPage, 10)) {
+            newPage = firstPage; // set to first page if input is less than first page
+        }
+        return newPage;
+    };
     useEffect(function () {
         var _a;
         if (isEdit) {
@@ -46997,14 +47022,23 @@ var PaginationInfo = function (_a) {
         }, cursor: "pointer", wrap: "nowrap" }, rest),
         React__default.createElement(React__default.Fragment, null, !isLoadingPage && (React__default.createElement(React__default.Fragment, null,
             !isEdit && (React__default.createElement(Text, { as: "span", cursor: "pointer" }, page)),
-            isEdit && (React__default.createElement(NumberInput, { w: 20, min: 1, max: lastPage, onChange: function (value) {
-                    var newPage = value
-                        ? parseInt(value, 10) >= parseInt(lastPage, 10)
-                            ? lastPage
-                            : value
-                        : 1;
-                    setPage(parseInt(newPage, 10));
-                }, defaultValue: page, size: "sm", onBlur: function () { return setIsEdit(false); } },
+            isEdit && (React__default.createElement(NumberInput, { w: 20, min: 1, max: lastPage, onBlur: function (event) {
+                    var value = event.target.value;
+                    var newPage = handlePageChange(value);
+                    setPage(newPage);
+                    setIsEdit(false);
+                }, onChange: function (value) {
+                    var newPage = handlePageChange(value);
+                    setInputValue(newPage);
+                }, onKeyDown: function (event) {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        var value = inputValue;
+                        var newPage = handlePageChange(String(value));
+                        setPage(newPage);
+                        setIsEdit(false);
+                    }
+                }, defaultValue: page, size: "sm" },
                 React__default.createElement(NumberInputField, { ref: numberInputRef }),
                 React__default.createElement(NumberInputStepper, null,
                     React__default.createElement(NumberIncrementStepper, null),
@@ -55774,7 +55808,10 @@ var SelectInner = function (_a, ref) {
     }); })), getComponentStyles('control', function (_a) {
         var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
         return (__assign$g(__assign$g(__assign$g({ color: fieldTextColor, fontSize: fieldFontSize, height: 'fit-content', minHeight: fieldHeight, borderRadius: fieldBorderRadius, borderColor: fieldBorderColor, backgroundColor: fieldBg, ':hover': {
-                borderColor: theme.colors.gray[300],
+                borderColor: !!isError && !isFocused ? fieldErrorBorderColor : fieldBorderColor,
+                backgroundColor: isLightMode
+                    ? theme.colors.gray['100']
+                    : theme.colors.gray['700'],
                 cursor: 'text'
             } }, getConditionalStyles(isFocused && fieldFocusBorderColor, {
             borderColor: fieldFocusBorderColor,
@@ -55784,9 +55821,13 @@ var SelectInner = function (_a, ref) {
             }
         })), getConditionalStyles(!!isError, {
             borderColor: fieldErrorBorderColor,
-            boxShadow: "0 0 0 1px ".concat(fieldErrorBorderColor),
+            boxShadow: "none",
+            borderWidth: '1px',
             '&:hover': {
-                borderColor: fieldErrorBorderColor
+                borderColor: fieldErrorBorderColor,
+                boxShadow: "none",
+                borderWidth: '1px',
+                borderStyle: 'solid'
             }
         })), getConditionalStyles(isDisabled, {
             opacity: 0.6
@@ -55876,7 +55917,7 @@ var SideNav = function (_a) {
     }
     var flexBgGradient = useColorModeValue(theme.colors.gradients.primary, 'linear(to-l, gray.900, gray.900)');
     var color = useColorModeValue('white', 'gray.50');
-    return (React__default.createElement(Flex$1, __assign$g({ w: "20rem", h: "100vh", flexDir: "column", bgGradient: flexBgGradient, color: color, pt: 6, px: 6, overflow: "auto", position: "fixed", top: "0", left: "0", sx: customScrollBar }, props), children));
+    return (React__default.createElement(Flex$1, __assign$g({ w: "18rem", h: "100vh", flexDir: "column", bgGradient: flexBgGradient, color: color, pt: 6, px: 6, overflow: "auto", position: "fixed", top: "0", left: "0", sx: customScrollBar }, props), children));
 };
 var SideNavContainer = function (props) { return (React__default.createElement(VStack, __assign$g({ spacing: 6, alignItems: "inherit", minH: "100%" }, props))); };
 var SideNavHeader = function (_a) {
@@ -55899,7 +55940,7 @@ var SideNavMenu = function (_a) {
     };
     var color = useColorModeValue('white', 'gray.100');
     return (React__default.createElement(VStack, __assign$g({ spacing: 1, alignItems: "inherit", h: "full", w: "full" }, rest),
-        React__default.createElement(Text, __assign$g({ fontSize: "lg", fontWeight: "bold", color: color, textTransform: "uppercase" }, textProps), title),
+        React__default.createElement(Text, __assign$g({ fontWeight: "bold", color: color, textTransform: "uppercase" }, textProps), title),
         children));
 };
 var SideNavMenuItem = function (_a) {
@@ -55911,10 +55952,10 @@ var SideNavMenuItem = function (_a) {
     if (isActive) {
         var bg = useColorModeValue('white', 'gray.800');
         var color = useColorModeValue('brand.600', 'gray.200');
-        return (React__default.createElement(Button, __assign$g({ w: "full", justifyContent: "flex-start", background: bg, color: color, fontSize: 'lg' }, rest), children));
+        return (React__default.createElement(Button, __assign$g({ w: "full", justifyContent: "flex-start", background: bg, color: color }, rest), children));
     }
     var btnColor = useColorModeValue('brand.50', 'gray.200');
-    return (React__default.createElement(Button, __assign$g({ w: "full", justifyContent: "flex-start", background: "transparent", color: btnColor, fontSize: 'lg', _hover: { background: 'whiteAlpha.200' }, _focus: { background: 'whiteAlpha.200' }, _active: { background: 'whiteAlpha.200' } }, rest), children));
+    return (React__default.createElement(Button, __assign$g({ w: "full", justifyContent: "flex-start", background: "transparent", color: btnColor, _hover: { background: 'whiteAlpha.200' }, _focus: { background: 'whiteAlpha.200' }, _active: { background: 'whiteAlpha.200' } }, rest), children));
 };
 
 var TopBar = function (props) { return (React__default.createElement(Stack, __assign$g({ minH: "4.6875rem", bg: useColorModeValue('white', 'gray.900'), boxShadow: "layout", w: "full", borderRadius: "0", justifyContent: "space-between", spacing: 2, alignItems: { base: 'inherit', xl: 'center' }, direction: { base: 'column', xl: 'row' }, py: { base: 4, xl: 0 } }, props))); };
@@ -56323,6 +56364,9 @@ var Input = {
                 },
                 _focusVisible: {
                     boxShadow: "0 0 0 1px ".concat(props.theme.colors.gray[300])
+                },
+                _placeholder: {
+                    color: 'gray.500'
                 }
             },
             addon: {
@@ -56344,6 +56388,9 @@ var Input = {
                 _focusVisible: {
                     bg: props.colorMode === 'light' ? 'gray.200' : 'gray.800',
                     boxShadow: "0 0 0 1px ".concat(props.theme.colors.gray[300])
+                },
+                _placeholder: {
+                    color: 'gray.500'
                 }
             },
             addon: {
@@ -56480,6 +56527,14 @@ var textarea = {
     defaultProps: defaultProps
 };
 
+var tooltip = {
+    baseStyle: {
+        fontSize: 'sm',
+        borderRadius: 'md',
+        padding: '0.5rem'
+    }
+};
+
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Alert: alert,
@@ -56496,7 +56551,8 @@ var components = /*#__PURE__*/Object.freeze({
   Slider: slider,
   Switch: _switch,
   Tag: tag,
-  Textarea: textarea
+  Textarea: textarea,
+  Tooltip: tooltip
 });
 
 var colors = {
@@ -56596,7 +56652,7 @@ var largeSizes = {
     '3xs': '14rem',
     '2xs': '16rem',
     xs: '20rem',
-    nav: '20rem',
+    nav: '18rem',
     sm: '24rem',
     md: '28rem',
     lg: '32rem',
@@ -56884,7 +56940,10 @@ var externalsStyles = function (props) {
     return Object.values(rawStyle).reduce(function (acc, cur) { return (__assign$g(__assign$g({}, acc), (typeof cur === 'function' ? cur(props) : cur))); }, {});
 };
 var styles = {
-    global: function (props) { return (__assign$g({ '#chakra-toast-portal > *': {
+    global: function (props) { return (__assign$g({ body: {
+            fontFamily: 'body',
+            fontSize: 'md'
+        }, '#chakra-toast-portal > *': {
             pt: 'safe-top',
             pl: 'safe-left',
             pr: 'safe-right',